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江苏 传 智 播客 教育 科技 股份 有 限 公司 ( 简称 传 智 播客 ) 是 一 家 致力 于 培养 高 素质 软件 
开发 人 才 的 科技 公司 , “黑马 程序 员 ”是 传 智 播客 旗下 高 端 IT 教育 品牌。 

“黑马 程序 员 ” 的 学 员 多 为 大 学 毕业 后 ， 想 从 事 IT 行业 ， 但 各 方面 条 件 还 不 成 熟 的 年 
轻 人 。“ 黑 马 程序 员 ”的 学 员 筛选 制度 非常 严格 ， 包 括 了 严格 的 技术 测试 、 自 学 能 力 测试 ， 
还 包括 性 格 测试 、 压 力 测 坛 、 品 德 测试 等 。 百 里 挑 一 的 残 栈 簿 选 制度 确保 学 员 质量 ， 并 降 
低 企业 的 用 人 风险 。 

自 “ 黑 马 程序 员 ” 成 立 以 来 ,教学 研发 团队 一 直 致力 于 打造 精品 课程 资源 , 不 断 在 产 、 
学 、 研 三 个 层面 创新 自己 的 执教 理念 与 教学 方针 ， 并 集中 “黑马 程序 员 ”的 优势 力量 ， 有 
针对 性 地 出 版 了 计算 机 系列 教材 80 多 种 ,制作 教学 视频 数 十 套 , 发 表 各 类 技术 文章 数 百 简 。 

“黑马 程序 员 " 不 仅 斥资 研发 IT 系列 教材 ,还 为 高 校 师 生 提 供 以 下 配套 学 习 资 源 与 服务 。 
为 大 学 生 提供 的 配套 服务 

1. 请 登录 “高 校 学 习 平台 ”http-/yxityxb com， 免 费 获取 海量 学 习 资源 ， 帮 助 高 校 学 
生 解 决 学 习 问 题 。 

2. 针对 高 校 学 生 在 学 习 过 程 中 存在 的 压力 等 问题 ， 我 们 还 面向 大 学 生 量 身 打造 了 “IT 
技术 女神 ”一 ““ 播 妞 学 姐 "， 可 提供 教材 配套 源码 和 习题 答案 ， 以 及 更 多 IT 学 习 资源 ， 
同学 们 快 来 关注 “ 播 如 学 姐 ”的 微 信 公 众 号 : boniu1024。 
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“ 播 妞 学 姐 ” 微 信和 分众 号 


为 教师 提供 的 配套 服务 
针对 高 校 教学 ,“ 黑 马 程序 员 ” 为 IT 系列 教材 精心 设计 了 “教案 + 授课 资源 + 考试 
系统 + 题库 + 教学 辅助 案例 ”的 系列 教学 资源 ， 高 校 老师 请 登录 “高 校 教 辅 平台 ”http:// 
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yx.ityxb.com 或 关注 码 大 牛 老师 微 信 /QQ: 2011168841， 获 取 教 材 配套 资源 ， 也 可 以 扫描 下 
方 二 维 码 ， 加 入 专 为 IT 教师 打造 的 师资 服务 平台 一 一 “教学 好 助手 "， 获 取 最 新 教师 教学 
辅助 资源 的 相关 动态 。 


传 智 人 
2019 年 6 月 


中 


前 


随 着 电子 商务 的 发 展 ， 网 络 购物 已 经 成 为 人 们 生活 的 一 部 分 , 导致 网 上 店铺 莲 勃 发 展 
起 来 。 面 对 竞争 激烈 的 电 商 市 场 ， 如 何 通 过 图 片 与 文字 的 恰当 搭配 与 编排 ， 让 自家 店铺 的 
商品 在 众多 竞争 对 手中 脱颖而出 ， 吸 引 顾 客 点 击 、 浏 览 并 下 单 购 买 ， 是 每 家 网 店 进行 店铺 
装修 时 都 必须 考虑 的 问题 。 由 此 就 衍生 了 “网 店 美工 ”这 个 职业 。 

为 什么 要 学 习 这 本 书 

目前 ， 国 内 许多 高 校 开设 了 电子 商务 专业 ， 一 些 经 济 管理 类 、 信 息 类 专业 也 开设 了 
电子 商务 相关 课程 。 但 是 ， 从 电子 商务 课程 内 容 来 看 ， 已 开设 的 课程 更 倾向 于 电子 商务 基 
础 理论 知识 ， 鲜 有 实 操 类 课程 ， 使 学 生 的 实践 操作 能 力 难 以 提升 。 因 此 ,我们 为 广大 初学 
者 量 身 打 造 了 本 书 ， 旨 在 为 初学 者 、 基 础 薄弱 的 从 业者 提供 实用 、 专 业 的 网 店 美工 实 操 
指导 。 


如 何 使 用 本 书 


本 书 采用 “理论 + 案例 ”的 编写 体例 ， 从 网 店 美工 人 门 基础 讲 起 ， 详 细 介绍 网 店 美工 
基础 、 图 片 修饰 、 页 面 设 计 、 店 铺 装 修 等 相关 技巧 。 全 书 以 “大 魔 树 女装 店铺 ”的 装修 为 
主线 ， 结 合 实例 演练 和 项 目 操作 ， 让 读者 更 好 地 体验 设计 思路 、 技 巧 和 理念 。 

全 书 共 分 9 章 ,按照 “基础 + 实例 + 项 目 ”的 结构 ,由 浅 入 深 , 循 序 渐进 。 在 内 容 选择 、 
结构 安排 上 更 加 符合 提高 从 业 人 员 职 业 技 能 水 平 的 需要 , 帮助 读者 全 面 、 快 速 地 吸收 知识 。 
各 章 内 容 如 下 : 

。 第 1 章 : 主要 介绍 网 店 美工 基础 、 图 像 处 理 软件 Photoshop、 矢 量 图 制作 软件 

Tllustrator、Dreamweaver 工具 , 使 读者 基本 认识 网 店 美工 , 了 解 网 店 美工 的 常用 软件 ， 

为 学 习 后 面 的 知识 黄 定 基础 。 

。 第 2 章 : 主要 讲解 网 店 美工 设计 的 基本 理念 ， 包 括 设计 的 主要 元 素 、 色 彩 基 础 与 搭 
配 技巧 、 文 字 排 版 设计 、 视 觉 构图 方法 等 。 

。 第 3 章 : 主要 讲解 商品 图 片 的 修复 与 修饰 ， 包 括 商 品 图 片 的 多 样 裁剪 、 调 整 商品 图 
片 的 色调 、 美 化 精 修 图 片 、 商 品 图 片 的 特殊 处 理 、 轻 松 学 会 抠 图 换 背 景 、 为 商品 图 
片 添加 文字 等 。 
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。 第 4 章 : 主要 讲解 商品 图 片 的 切片 与 管理 ,包括 图 片 的 切片 与 优化 、 网 店 图 片 管理 。 
。 第 5 章 : 主要 讲解 网 店 装修 元 素 的 设计 与 制作 , 包括 店铺 Logo 的 设计 、 店 标的 设计 、 
店铺 背景 的 制作 等 。 
。 第 6 章 : 主要 讲解 快速 制作 店铺 首页 的 相关 知识 ， 包 括 PC 端 首页 规划 方案 、PC 端 
首页 设计 与 制作 、 无 线 端 首页 设计 与 装修 等 。 
。 第 7 章 : 主要 讲解 商品 详情 页 的 设计 ， 包 括 宝贝 详情 页 简介 、PC 端 宝贝 详情 页 设 
计 与 制作 、 无 线 端 宝贝 详情 页 设计 与 制作 等 。 
。 第 8 章 : 主要 讲解 店铺 推广 图 设计 的 相关 知识 ， 包 括 高 点 击 率 的 主 图 制作 、 直 通车 
推广 图 片 设 计 、 钻 石 展位 推广 图 设计 、 店 铺 二 维 码 的 制作 、 淘 宝 视频 的 制作 等 。 
。 第 9 章 : 主要 介绍 店铺 装修 及 上 传 方法 ， 包 括 店铺 装修 工具 介绍 、PC 端 店铺 装修 、 
无 线 端 店铺 装修 等 。 
上 述 9 章 中 , 第 1 章 为 网 店 美工 人 门 基础 , 能 够 让 读者 对 网 店 美工 有 一 个 初步 的 了 解 ; 
第 2 ~4 童 是 对 网 店 美工 设计 技巧 的 讲解 ,能 为 读者 后 续 的 设计 与 制作 奠定 基础 ; 第 5~8 章 
讲解 如 何 设 计 与 制作 店铺 和 店铺 推广 中 使 用 的 图 片 ; 第 9 章 讲解 如 何 将 所 有 设计 的 图 片 装 
修 上 传 至 淘宝 店铺 首页 。 
通过 对 本 书 的 系统 学 习 , 读者 可 以 对 网 店 美工 有 全 面 的 认识 , 了 解 网 店 基础 理论 知识 ， 
人 掌握 网 店 美工 的 技术 ， 有 具备 网 店 的 相关 应 用 能 力 ， 成 为 市 场 需 求 的 既 懂 理论 、 又 懂 技术 的 
应 用 型 网 店 美工 专业 人 才 。 
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第 1 章 


网 店 美工 入 门 基础 


学 习 目标 

知识 目标 | 。 认识 网 店 美工 及 其 必 备 技能 

。 认识 图 像 处 理 软件 Photoshop 

。 认识 矢量 图 制作 软件 lllustrator 

。 掌握 Photoshop 软 件 中 常用 工具 的 操作 技巧 
。 掌握 IIustrator 软 件 中 常用 工具 的 操作 技巧 


技能 目标 


随 着 互联 网 的 发 展 ， 网 络 购物 已 经 成 为 消费 者 的 首选 ， 面 对 形形色色 的 网 络 商品 ， 消 费 者 既 看 
不 见 ， 也 摸 不 到 ， 展 示 的 页 面 和 图 片 成 了 消费 者 了 解 商品 的 唯一 渠道 ， 因 此 如 何 把 店铺 做 得 精致 、 
美观 、 便 捷 已 经 成 为 商家 的 首要 需求 。 面 对 这 种 需求 ， 网 店 美工 应 运 而 生 。 然 而 什么 是 网 店 美工 ? 
网 店 美工 的 职责 是 什么 ? 很 多 初学 者 依然 不 明 就 里 。 本 章 针对 网 店 美工 的 工作 内 容 及 网 店 美工 常用 
的 软件 进行 介绍 ， 让 读者 对 网 店 美工 有 一 个 初步 的 了 解 。 
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1.1 | 网 店 美工 概述 


在 现实 生活 中 ， 装 修 精美 的 门店 更 容易 吸引 消费 者 进 店 消费 ， 而 竞争 越 来 越 激 烈 的 网 
上 店铺 同样 需要 精美 的 页 面 来 吸引 买 家 点 击 及 购买 。 网 店 美工 是 网 店 的 装饰 者 ， 他 们 从 视 
觉 角度 快速 提高 店铺 形象 和 商品 质感 ， 以 吸引 更 多 顾客 浏览 和 购买 。 本 节 将 对 网 店 美工 这 
一 岗位 进行 简单 介绍 。 


1.1.1 认识 网 店 美工 


很 多 人 是 第 一 次 接触 网 店 美工 岗位 ， 对 该 岗位 并 不 熟悉 ， 下 面 将 对 网 店 美工 的 概念 、 
重要 性 和 必 备 技能 等 进行 介绍 。 
1. 什么 是 网 店 美工 

传统 的 美工 是 指 对 平面 、 色 彩 、 基 调 、 创 意 等 进行 加 工 和 创作 的 技术 人 才 ， 分 为 平面 
美工 、 网 页 美工 和 三 维 美工 。 而 随 着 电子 商务 的 迅速 发 展 ， 网 店 美工 这 一 新 兴 职 业 也 快速 
兴起 。 网 店 美工 是 淘宝 、 天 猫 、 京 东 等 一 系列 网 店 页 面 设计 美化 人 员 的 统称 ， 这 些 设 计 人 
员 除 了 需要 熟练 掌握 各 种 制图 软件 ， 如 Photoshop 、Ilustrator 和 Dreamweaver 等 软件 的 操 
作 技 巧 外 ， 还 需 熟 悉 网 店 页 面 布局 ， 了 解 产 品 特点 ， 并 能 够 准确 判断 目标 用 户 的 需求 ， 根 
据 用 户 需求 设计 吸引 眼球 的 图 片 。 

总 而 言 之 ， 网 店 美工 不 仅 要 有 很 好 的 技术 能 力 ， 还 需要 有 良好 的 理解 能 力 ， 能 够 洞悉 
策划 方案 的 意图 ， 并 加 入 自己 的 创意 ,设计 出 符合 商业 需求 的 图 片 。 


2. 网 店 美工 的 重要 性 


通过 网 店 美工 设计 和 装修 精美 的 店铺 不 仅 可 以 提高 店铺 的 形象 和 品质 ， 还 能 提升 顾客 
的 信任 感 ， 提 高 商品 的 成 交 量 。 

会 提升 店铺 形象 与 品质 

装修 精美 的 店铺 ， 能 够 让 买 家 产生 愉悦 的 心情 ， 使 天 家 长 时 间 浏 览 也 不 会 感到 视觉 疲 
劳 。 一 个 装修 精美 的 网 店 ， 是 艺术 和 技术 的 完美 结合 ， 它 展示 的 不 仅 是 商品 ， 更 是 店铺 卖 
家 的 经 营 理念 和 店铺 形象 。 如 图 1-1 所 示 ,图 (a ) 是 按照 装修 后 台 的 默认 模板 进行 装修 的 ， 
给 人 一 种 杂乱 无 章 的 感觉 ,缺乏 吸引 力 ; 图 (b ) 是 经 过 后 期 精心 装修 的 ,看 起 来 更 具 品 质感 ， 
更 吸引 人 。 
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(a) 用 默认 模板 装修 的 效果 (b) 精心 装修 的 效果 
图 1-1 包 包 店铺 首页 对 比 


斧 提高 顾客 的 信任 感 和 宝贝 成 交 量 

淘宝 买 家 在 网 上 购物 ， 都 是 通过 文字 和 图 片 去 了 解 商品 的 ， 美 观 的 商品 陈列 和 专业 的 
页 面 设计 不 但 可 以 提升 顾客 对 买 家 的 信任 感 ， 并 且 还 可 以 提高 商品 附加 值 、 店 铺 浏 览 量 和 
成 交 量 。 因 此 ， 装 修 精美 上 且 专 业 的 店铺 更 容易 让 人 产生 购买 的 欲望 。 如 果 一 个 店铺 的 用 色 
杂乱 ， 或 整个 店铺 空荡荡 ， 是 无 法 引起 买 家 购买 欲望 的 。 因 此 ， 装 修好 店铺 页 面 是 为 了 让 
买 家 有 更 好 的 购物 体验 。 


1.1.2 ”网 店 美工 的 工作 职责 


网 店 美工 的 工作 范畴 包括 店铺 页 面 设计 与 美化 、 网 店 促销 海报 制作 、 宝 贝 详 情 页 设计 、 
图 片 美化 、 网 页 切片 等 。 下 面 对 网 店 美工 的 工作 范畴 与 设计 要 求 进行 介绍 。 
。 掌 握 店铺 特色 : 优秀 的 网 店 能 给 人 留 下 良好 的 第 一 印象 。 目 前 网 店 中 同一 类 型 的 店 
铺 繁多 ， 若 想 在 众多 的 店铺 中 脱颖而出 ， 独 具 特 色 就 显得 尤为 重要 。 只 有 展示 出 自 
己 店铺 的 特色 ， 才 能 吸引 更 多 的 买 家 关注 ， 从 而 引导 顾客 购买 ， 带 来 转化 。 所 以 ， 
美工 在 美化 商品 的 过 程 中 ， 创 造 出 属于 自己 的 店铺 特色 是 成 功 的 第 一 步 。 
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。 商品 的 美化 : 使 用 相机 拍摄 出 的 商品 一 般 不 会 直接 上 传 至 网 店 ， 为 了 体现 商品 的 效 
果 ， 商 家 通常 会 对 商品 图 片 进行 美化 和 修饰 。 但 需要 注意 的 是 ， 网 店 美工 不 是 单纯 
地 做 设计 ， 怎 么 吸引 顾客 才 是 最 重要 的 。 因 此 在 处 理 时 需要 根据 对 此 产品 的 拍摄 原 
图 进行 美化 ， 并 适当 添加 文字 和 创意 来 体现 产品 特色 。 

店铺 的 装修 与 设计 : 美工 不 只 是 将 图 片 处 理 完成 后 将 图 片上 传 至 不 同 的 模块 。 一 个 
好 的 美工 不 但 需要 掌握 基本 的 技术 方法 ,还 要 将 方法 应 用 到 店铺 装修 中 , 抓 住 卖点 ， 
促使 顾客 继续 看 下 去 ， 并 通过 与 代码 的 结合 使 用 ， 使 店铺 花 最 少 的 成 本 取得 最 好 的 
效果 。 

活动 页 面 的 设计 : 在 网 店 平台 中 ,会 不 定期 举行 各 种 促销 活动 。 为 了 在 众多 店铺 中 
脱颖而出 ， 活 动 的 策划 就 变 得 尤为 重要 。 这 时 ， 优 秀 的 店铺 美工 更 需要 透彻 理解 活 
动 意图 ， 通 过 设计 与 装修 店铺 将 活动 意图 传递 给 买 家 ， 让 买 家 了 解 活动 内 容 、 优 惠 
力度 ， 从 而 促进 销量 的 提升 。 美 工 在 设计 时 要 保证 契合 活动 主题 、 页 面 美 观 。 
推广 的 了 解 与 运用 : 推广 就 是 将 自己 的 产品 、 服 务 和 技术 等 内 容 通过 各 种 渠道 让 更 
多 的 用 户 了 解 、 接 受 ， 从 而 达到 宣传 的 目的 。 对 网 店 美工 来 说 ， 推 广 主要 是 通过 图 
片 将 网 店 的 产品 、 品 牌 和 服务 等 信息 传达 给 买 家 ， 加 深 店铺 在 买 家 心中 的 印象 ， 从 
而 使 买 家 产生 对 店铺 的 认同 感 。 由 于 推广 活动 、 推 广 手段 的 不 同 ， 网 店 推广 使 用 的 
图 片 规格 大 小 不 一 ， 有 时 文件 大 小 也 有 很 多 限制 ， 这 就 对 网 店 美工 人 员 提 出 了 更 多 
要 求 , 不 仅 要 在 既定 的 图 片 规格 内 向 买 家 表达 出 设计 意图 , 还 要 体现 出 产品 的 价值 ， 
文案 的 编写 也 要 做 到 让 顾客 快速 理解 ， 并 产生 深刻 印象 。 


1.1.3 ”网 店 美工 需要 掌握 的 图 像 常 识 


网 店 美工 在 设计 过 程 中 需要 使 用 的 图 片 种 类 有 很 多 ， 并 且 装 修 店铺 时 不 同 的 模块 对 图 
片 均 有 不 同 的 规格 要 求 ， 因 此 区 分 不 同 的 图 像 格 式 和 适用 范围 也 成 为 网 店 美工 必须 掌握 的 
重点 技能 。 网 店 装修 中 常见 的 图 片 格式 包括 PSD 、JPEG、GIF 和 PNG， 下 面 分 别 对 这 些 
格式 的 使 用 方法 和 范围 进行 介绍 。 


1.PSD 格 式 


PSD 格式 是 Photoshop 工具 的 默认 保存 格式 , 也 是 唯一 支持 所 有 图 像 模式 的 文件 格式 。 
它 可 以 保存 图 像 中 的 图 层 、 通 道 、 辅 助 线 和 路 径 等 信息 。 


2. JPEG 格 式 

JPEG 格式 是 一 种 有 损 压缩 的 图 像 格式 ， 不 支持 Alpha 通道 ， 也 不 支持 透明 。 最 大 的 
寺 点 是 文件 比较 小 ,可 以 进行 高 倍率 的 压缩 , 因而 在 注重 文件 大 小 的 领域 应 用 广泛 。 例 如 ， 
网 页 制作 过 程 中 的 图 像 ， 如 横幅 广告 (banner )、 商 品 图 片 、 较 大 的 插图 等 都 可 以 保存 为 
JPEG 格式 。 
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3. GIF 格式 


GIF 格式 是 一 种 通用 的 图 像 格式 。 它 不 仅 是 一 种 无 损 压 缩 格式 , 而 且 支持 透明 和 动画 。 
另外 ，GIF 格式 保存 的 文件 不 会 占用 太 多 的 磁盘 空间 ， 非 常 适合 网 络 传输 ， 是 网 页 中 常用 
的 图 像 格式 。 


4.PNG 格 式 


PNG 格式 是 一 种 无 损 压 缩 的 图 像 格式 。 它 结合 GIF 和 JPEG 格式 的 优点 ， 不 仅 无 损 压 
缩 , 体积 较 小 ,而且 支持 透明 和 Alpha 通道 。 由 于 PNG 格式 不 完全 适用 于 所 有 浏览 器 ( 例 
如 旧版 本 的 正 浏 览 器 )， 所 以 在 网 页 中 比 GIF 和 JPEG 格式 使 用 得 少 。 但 随 着 网 络 的 发 展 
和 因特网 传输 速度 的 改善 ，PNG 格式 将 是 网 页 中 使 用 的 一 种 标准 图 像 格式 。 


1.1.4 网 店 美工 需要 注意 的 问题 


网 店 美工 不 仅 需要 掌握 基本 的 软件 操作 ， 还 需 熟知 产品 信息 、 卖 点 、 注 意 事项 、 优 劣 
势 等 。 能 够 做 到 将 产品 劣势 变 成 优势 ， 突 出 产品 卖点 扬长 避 短 。 下 面 对 网 店 美工 的 注意 事 
项 进行 简单 介绍 。 

。 思 路 清晰 : 网 店 美工 在 装修 和 处 理 图 片 之 前 ， 需 要 有 一 个 清晰 的 思路 ， 也 就 是 确定 

一 个 整体 框架 ， 在 框架 内 设计 出 店铺 的 主要 卖点 以 及 产品 特点 ， 以 及 如 何 将 店铺 装 

修 的 美观 又 引 人 注 意 。 

。 装 修 时 间 的 把 握 : 在 装修 店铺 过 程 中 ， 还 要 把 握 店铺 装修 时 间 ， 如 “ 双 十 一 ”“ 年 

中 大 促 “ 元 旦 促销 ”等 ， 网 店 美工 应 抓 住 活动 的 时 机 对 店铺 进行 装修 ,需要 提前 
1 ~2 个 月 进行 活动 准备 。 因 此 在 活动 前 期 应 对 活动 文案 、 图 片 进 行 制作 ， 在 活动 来 

临 之 前 完成 促销 信息 的 整理 以 及 店铺 的 设计 装修 ， 以 便 促进 产品 的 销量 。 

。 店铺 风 格 的 统一 : 店铺 装修 不 但 要 有 合理 的 色彩 搭配 ， 还 有 统一 店铺 和 详情 页 的 风 

格 ， 因 此 设计 店铺 分 类 导航 、 店 铺 公告 等 模块 时 ， 统 一 风格 就 变 得 尤为 重要 。 

。 突 出 主 次 : 工作 过 程 中 ， 网 店 美工 切忌 为 了 追求 美观 的 效果 ， 而 对 店铺 进行 过 度 的 

美化 ， 使 商品 图 片 不 突出 ， 掩 盖 店 铺 风 格 和 商品 的 卖点 ， 这 样 将 会 适得其反 。 


1.2 | 图 像 处 理 软件 Photoshop 介 绍 


了 Photoshop 是 Adobe 公司 旗下 最 为 出 名 的 图 像 处 理 软件 之 一 。 它 提供 了 灵活 便捷 的 图 
像 制 作 工 具 、 强 大 的 像素 编辑 功能 ， 被 广泛 应 用 于 数码 照片 后 期 处 理 、 平 面 设计 、 网 页 设 
计 以 及 设计 等 领域 ,是 网 店 美工 必须 掌握 的 设计 软件 。 本 节 将 以 Photoshop CS6 为 例 
对 Photoshop 软件 做 简单 介绍 。 
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NA 


海宝 ”天 猫 《于 当 


区 | 


启动 Photoshop CS6 软件 ， 选 择 “文件 ”一 “打开 ” 命 


Photosho 


p CS6 工 作 界面 简介 


件 操作 界面 ， 如 图 1-2 所 示 。 


东 


工具 箱 


图 像 
编辑 区 


图 1-2 所 示 界 面 是 Photoshop CS6 的 基础 工作 界面 ， 包 含 了 菜单 栏 、 选 项 栏 、 


图 1-2 Photoshop 工 


图 像 编 辑 区 域 、 控 制 面板 等 模块 ， 具 体 介 绍 如 下 


1. 菜单 栏 


菜单 栏 用 于 对 Photoshop 所 有 的 操作 进行 分 类 ,包括 “文件 “编辑 ”“ 图 像 ”图 层 ”“ 
字 ”“ 选 择 "“ 滤 镜 ”“3D” “视图 "”“ 窗 口 ”及 “帮助 ”等 菜单 ， 如 图 1-3 所 示 。 
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作 界 面 


公 


对 一 张 图 片 即 可 进入 


图 1-3 ”菜单 栏 


其 中 各 菜单 的 具体 说 明 如 下 。 


“文件 ”菜单 : 
“编辑 ”菜单 : 
“图 像 ”菜单 : 
“图 层 ” 菜 单 : 
“文字 ”菜单 : 
“选择 ”菜单 : 
“ 滤 镜 ”菜单 : 
“3D” 菜 单 : 月 


包含 各 种 操作 文件 的 命令 。 
包含 各 种 编辑 文件 的 操作 命令 


包含 各 种 改变 图 像 的 大 小 、 颜 色 等 的 操作 命令 。 


包含 各 种 调整 图 像 中 图 层 的 操 
包含 各 种 对 文字 的 编辑 和 调整 


作 命令 。 


功能 。 


包含 各 种 关于 选区 的 操作 命令 。 


包含 各 种 添加 滤 镜 效果 的 操作 


月 于 实现 3D 图 层 效 果 。 


人 人 
命令 。 


hr 


软 


[ 具 箱 、 
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。 "视图 ”菜单 : 包含 各 种 对 视图 进行 设置 的 操作 命令 。 
。 “窗口 ”菜单 : 包含 各 种 显示 或 隐藏 控制 面板 的 命令 。 
。 "帮助 ”菜单 : 包含 各 种 帮助 信息 。 


2. 选项 栏 

选项 栏 是 工具 箱 中 各 个 工具 的 功能 扩展 ， 可 以 通过 选项 栏 对 工具 进行 进一步 的 设置 。 
当选 择 某 个 工具 后 ，Photoshop CS6 工作 界面 的 上 方 将 出 现 相应 的 工具 选项 栏 。 例 如 ， 选 
择 “ 魔 棒 工 具 ” 国 时 ， 其 选项 栏 如 图 1-4 所 示 ， 通 过 其 中 的 各 个 选项 可 以 对 “ 魔 棒 工 具 ” 
做 进一步 设置 。 


所 有 图 层 取样 


图 1-4 选项 栏 


1.2.2” ”Photoshop CS6 初 始 化 设置 


为 了 使 初学 者 更 好 地 认识 Photoshop 工具 ， 需 要 对 Photoshop 进行 初始 化 设置 ， 初 始 
化 设置 的 具体 介绍 如 下 。 


1. 工作 区 布局 设置 
Photoshop 工具 的 工作 区 布局 主要 分 为 “基本 功能 ”" 绘 


画 "“ 摄 影 "“ 排 版 规则 ”等 类 别 。 其 中 “基本 功能 ”是 和 

Photoshop 默认 的 工作 区 布局 ， 作 为 网 店 美工 可 以 直接 使 用 这 RM 

一 工作 布局 。 如 果 需 要 更 改 布局 ， 可 以 选择 菜单 栏 中 的 “ 窗 人 

口 ” 一 “工作 区 ”命令 , 会 弹出 如 图 1-5 所 示 的 菜单 ， 选 择 其 名 快捷 外 和 训 单 0 
中 的 选项 ， 即 可 完成 工作 区 布局 的 更 改 。 1 


在 图 1-5 所 示 的 工作 区 布局 菜单 中 还 可 以 对 工作 区 进行 
复位 、 新 建 、 删 除 等 操作 。 


2. 单 位 设置 


在 Photoshop 工具 中 ,默认 的 单位 是 厘米 ( cm ), 就 是 说 我 们 在 Photoshop 中 使 用 的 图 片 ， 
其 宽度 、 高 度 都 是 以 厘米 为 单位 的 ， 如 图 1-6 所 示 。 

但 网 店 美工 的 工作 主要 是 数码 图 像 的 制作 ， 这 就 会 用 到 一 种 计量 单位 一 一 像素 。 像 素 
(pixel ) en 缩写 为 px， 是 用 来 计算 数码 图 像 的 一 种 单位 。 如 同 摄影 的 相 
片 一 样 ， 影像 也 具有 连续 性 的 浓淡 阶 调 ， 若 把 影像 放大 数 倍 ， 会 发 现 这 些 连 续 色调 其 
实 是 wy 彬 相近 的 小 方 点 组 成 ， 这 些小 方 点 就 是 构成 影像 的 最 小 单位 像素 ， 如 图 1-7 
所 示 。 


007 


AAA 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


mgtw:[1207 “[k 司 
高 度 (H): | 8.64 厘米 可 


图 1-6 ”图像 单位 图 1-7 ”像素 展示 
网 店 美工 在 使 用 Photoshop 工具 时 ,首先 应 该 设置 单位 。 选 择 菜 单 栏 中 的 “编辑 "一 “ 首 
选项 ”一 “单位 与 标尺 ”命令 , 打开 “首选 项 ”对 话 框 , 设置 标尺 单位 为 “像素 ”, 如 图 1-8 
所 示 。 


图 1-8 设置 标尺 单位 


3. 工 具 栏 


工具 箱 是 Photoshop 工作 界面 的 重要 组 成 部 分 ，Photoshop CS6 的 工具 箱 主要 包括 选 
择 工具 、 绘 图 工具 、 填 充 工具 、 编 辑 工具 、 快 速 蒙 版 工具 等 。 


4. 图 像 编 辑 区 域 
图 像 编辑 区 域 是 指 Photoshop 中 编辑 和 处 理 图 片 的 工作 区 ,也 是 Photoshop 的 "工作 台 ”。 


S. 控制 面板 


控制 面板 是 Photoshop 处 理 图 像 时 不 可 或 缺 的 部 分 ， 它 可 以 完成 对 图 像 的 处 理 操 作 和 
相关 参数 的 设置 ， 如 显示 信息 、 选 择 颜色 、 图 层 编辑 等 。 


1.2.3 ”认识 Photoshop CS6 的 常用 工具 


在 Photoshop CS6 中 制作 或 处 理 图 像 过 程 中 经 常 需要 使 用 一 些 工具 ， 主 要 包括 规则 选 
框 工 具 组 、 套 索 工 具 组 、 魔 棒 工 具 组 、 裁 剪 与 切片 工具 组 、 图 像 修复 工具 组 等 ， 如 图 1-9 
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所 示 。 
规则 选 框 工具 组 一 般 | 移动 工具 
BE ER 
戴 前 与 切片 工具 组 一 对: 
图 像 修复 工具 组 一 肯 关 画笔 工具 组 
图 章 工具 组 1 
橡皮 擦 工具 组 x 
涂抹 工具 组 一切. 减 淡 与 加 深 工具 组 
钢笔 工具 组 一 上 生肖 文本 工具 组 


形状 工具 组 


前 景色 /背景 色色 块 


| 
| | 3 


昌 


图 1-9 工具 箱 

。 规 则 选 框 工具 组 : 包括 矩形 选 框 工具 、 椭 圆 选 框 工具 、 单 行 选 框 工具 、 单 列 选 框 工具 。 
主要 用 于 在 文件 中 创建 各 种 类 型 的 选 框 ， 创 建 后 ， 操 作 只 在 选 框 内 进行 ， 选 框 外 不 
受 影响 。 

套 索 工具 组 : 包括 套 索 工具 、 多 边 形 套 索 工具 、 磁 性 套 索 工具 ， 主 要 用 于 建立 复杂 
形状 选区 。 

广 棒 工具 组 : 包括 快速 选择 工具 和 魔 棒 工 具 ， 主 要 用 于 通过 图 像 中 相 邻 像素 的 颜色 
近似 程度 来 创建 选区 ， 适 用 于 选取 图 像 中 颜色 相近 或 有 大 色 块 单 色 区 域 的 图 像 。 
橡皮 擦 工具 组 : 包括 普通 橡皮 擦 工具 、 背 景 橡皮 擦 工具 、 魔 术 橡 皮 擦 工具 ， 用 于 擦 


除 图 像 中 不 需要 的 图 像 区 域 。 
。 移动 工具: 用 于 移动 选区 内 容 、 辅 助 线 或 图 层 中 的 内 容 ， 也 可 以 将 内 容 置 人 其 他 文 
档 中 。 


钢笔 工具 组 : 包括 钢笔 工具 、 自 由 钢笔 工具 、 转 换 点 工具 、 添 加 锚 点 工具 、 删 除 锚 
点 工具 ， 用 于 绘制 与 编辑 路 径 。 

形状 工具 组 : 包括 矩形 工具 、 圆 角 和 矩形 工具 、 椭 圆 工具 、 多 边 形 工具 、 直 线 工具 、 
自 定义 形状 工具 等 ， 用 于 绘制 标准 的 集合 矩形 图 形 ， 也 可 以 绘制 自 定义 图 形 。 
裁剪 与 切片 工具 组 : 包括 透视 裁剪 工具 、 切 片 工具 、 切 片 选 择 工 具 ， 用 于 将 图 像 裁 
剪 成 需要 的 大 小 或 将 图 像 切割 成 多 个 部 分 的 图 像 保 存 。 

。 画笔 工具 组 : 包括 画笔 工具 、 铅 笔 工 具 、 颜 色 替 换 工 具 、 混 合 器 画笔 工具 ， 用 于 绘 
制 各 种 图 形 、 图 案 或 为 选区 上 色 、 描 边 。 
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图 像 修复 工具 组 : 包括 修复 画笔 工具 、 污 点 修复 工具 、 修 补 工具 、 红 眼 工具 ， 用 于 
去 除 商品 图 片 中 的 污点 或 修补 图 像 。 

图 章 工 具 组 : 包括 仿制 图 章 工具 、 图 案 图 章 工 具 ， 用 于 吸取 图 像 中 的 一 部 分 或 图 像 
中 的 图 案 修补 图 像 其 他 部 分 。 

减 淡 与 加 深 工具 组 : 包括 加 深 工具 、 减 淡 工 具 、 海 绵 工具 ， 可 以 使 涂抹 过 的 区 域 颜 
色 变 深 、 变 暗 或 减 淡 、 变 亮 。 

涂抹 工具 组 : 包括 模糊 工具 、 涂 抹 工 具 、 锐 化 工具 ， 分 别 用 于 涂抹 图 像 中 的 颜色 ， 
模糊 部 分 图 像 ， 或 提高 部 分 图 像 的 饱和 度 。 

文本 工具 组 : 包括 横 排 文字 工具 、 直 排 文 字 工具 、 横 排 文 字 蒙 版 工具 、 直 排 文 字 蒙 
版 工具 ， 用 于 输入 横 排 、 竖 排 文 字 、 文 字 选 区 、 段 落 文 本 。 

前 景色 /背景 色色 块 : 前 景色 是 插入 、 绘 制图 形 的 颜色 ， 背 景色 是 需要 处 理 的 图 
片 底 色 ， 默 认 的 是 白色 。 按 Ctl+Delete 组 合 键 可 以 用 背景 色 填充 当前 图 形 ， 按 
Alt+Delete 组 合 键 可 以 用 前 景色 填充 当前 图 形 。 单 击 对 应 的 色 块 可 打开 颜色 设置 对 
话 框 ， 在 其 中 选择 颜色 。 


1.2.4， 认识 Photoshop CS6 的 图 层面 板 


Photoshop 软件 中 的 图 层 就 像 是 一 张 透明 的 纸 ， 多 个 图 层 就 是 多 张 透明 的 纸 重 苹 。 在 
编辑 当前 图 层 的 对 象 时 ， 该 操作 不 会 影响 其 他 图 层 ， 因 此 在 制作 设计 时 应 多 建 图 层 ， 方便 
后 期 修改 ， 图 1-10 即 为 图 层面 板 。 


图 层 混合 模式 到 层 不 透明 度 
图 层 锁定 栏 图 层 填充 
图 层 名 称 
辐 层 缩 览 图 
显示 /隐藏 图 标 
TT J 新品 上 市 
ll 名 
“链接 图 层 ” 按 钮 摊 加 如 有 相合 “删除 图 屋 " 按钮 


“添加 图 层 样式 ”按钮 
“添加 图 层 蒙 版 ”按钮 
“创建 新 图 层 ” 按 钮 


图 1-10 ”图 居 面 板 
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。 图 层 混合 模式 : 图 层 混合 模式 主要 用 于 创建 图 层 的 各 种 特殊 效果 ,包括 溶解 、 变 暗 、 
正片 基底 、 颜 色 加 深 、 线 性 加 深 、 番 加 、 和 柔 光 、 亮 光 、 强 光 。 

。 图 层 不 透明 度 、 图 层 填 充 : 图 层 填充 针对 的 是 图 层 上 的 填充 颜色 ， 对 图 层 上 添加 的 
一 些 描 边 、 投 影 、 斜 面 浮雕 等 特效 不 起 作用 ; 图 层 透明 度 则 针对 整个 图 层 ， 包 括 图 
层 特效 。 

。 图 层 锁定 栏 ; 用 于 设置 选择 图 层 的 锁定 方式 ,其 中 包括 “锁定 透明 像素 ”按钮 国 “ 锁 
定 图 像 像素 ”按钮 圈 .“ 锁 定位 置 ”按钮 圈 、“ 锁 定 全 部 ”按钮 图 .不 能 对 锁定 的 对 
象 进行 编辑 。 

。 图 层 名 称 : 图 层 名 称 主要 是 对 每 个 图 层 进行 命名 ， 以 便 在 很 多 图 层 中 快速 找到 相应 
图 层 ， 双 击 该 图 层 即 可 修改 图 层 名 称 。 

。 显 示 / 隐藏 图 标 : 单 击 即 可 切换 显示 和 隐藏 图 层 ， 若 按 住 Alt 键 单 击 该 图 标 ， 可 以 
切换 显示 或 隐藏 其 他 图 层 

。“ 链 接 图 层 ” 按 钮 : 用 于 链接 两 个 或 两 个 以 上 的 图 层 ， 方 便 同 时 进行 缩放 或 透视 等 
操作 ， 

。 “添加 图 层 样式 ”按钮 : 用 于 选择 和 设置 图 层 的 样式 

。“ 添 加 图 层 蒙 版 ”按钮 : 单 击 该 按钮 ， 可 以 为 图 层 添加 蒙 版 

。“ 创 建新 图 层 ” 按 钮 : 用 于 创建 一 个 新 的 空白 图 层 

。 “删除 图 层 ” 按 钮 : 用 于 删除 选择 的 图 层 


1.2.5 ”认识 Photoshop CS6 图 像 编辑 区 


在 Photoshop CS6 窗口 中 打开 一 个 图 像 ， 会 自动 创建 一 个 图 像 编 辑 窗口 。 如 果 打 开 了 
多 个 图 像 ， 则 它们 会 停放 到 选项 卡 栏 中 ， 如 图 1-11 所 示 。 单 击 一 个 文档 的 名 称 ， 即 可 将 
其 设置 为 当前 操作 的 窗口 ， 如 图 1-12 所 示 。 男 外 ， 按 Ctrl+Tab 组 合 键 ， 可 以 按照 前 后 顺 
序 切换 窗口 ; 按 Ctrl+Shift+Tab 组 合 键 ， 可 以 按照 相反 的 顺序 切换 窗口 


图 1-11 打开 多 个 图 像 
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图 1-12 ”当前 操作 窗口 
选中 一 个 窗口 的 名 称 选项 卡 标签 ， 按 住 鼠标 左 键 不 放 将 其 从 选项 卡 标签 栏 中 拖 出 ， 
即 可 变 成 一 个 在 任意 移动 位 置 的 浮动 面板 ， 如 图 1-13 所 示 。 拖 动 浮动 面板 的 一 角 ， 可 以 
调整 面板 窗口 的 大 小 ， 如 图 1-14 所 示 。 另 外 ， 将 一 个 浮动 面板 的 标题 栏 拖 动 到 选项 卡 
标签 栏 中 ， 当 图 像 编 辑 区 出 现 蓝 色 方 框 时 释放 鼠标 ， 可 以 将 窗口 重新 停放 到 选项 卡 标签 
栏 中 


7IT 


图 1-13 浮动 窗口 
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图 1-14 ”调整 窗口 大 小 


1.3 | Photoshop CS6 中 的 常用 组 合 键 


在 使 用 Photoshop 处 理 商 品 图 片 或 设计 广告 图 片 过 程 中 ,使 用 相应 的 组 合 键 可 以 比 选 
择 命令 菜单 更 便捷 ， 表 1-1 中 列举 了 一 些 网 店 美工 常用 的 组 合 键 


表 1-1 Photoshop 常用 组 合 键 


文件 操作 图 层 操 作 图 像 操 作 选择 与 画笔 操作 
新 建文 件 新 建 图 层 调整 色 阶 全 选 
Ctrl+N Ctrl+ShiftHN Ctrl+L Ctrl+A 
保存 文件 复制 图 层 调整 曲线 取消 选择 
Ctrl+S Ctrl+J Ctrl+M Ctrl+D 
打开 文件 与 前 一 图 层 编组 调整 色彩 平衡 反选 
Ctrl+O Ctrl+G- Ctrl+B Ctrl+Shift+I 
关闭 当前 文件 取消 编组 调整 色相 /饱和 度 羽化 
Ctrl+W Ctrl+ShifttG Ctrl+HU Shift+F6 
显示 网 格 合并 图 层 去 色 缩小 画笔 
Ctrl+Alt+” CtrlHE Ctrl+Shift+U Shift+ [ 
显示 标尺 盖 印 图 层 反 向 放大 画笔 
CtrlHR. Ctrl+Al CtrHI Shift+ ] 
放大 视图 盖 印 加 可 见 图 层 液化 
Ctrl++ ShiftrCtrl+AltHE CtrlHShiftHX 
缩小 视图 删除 图 层 自由 变换 
Ctrl+- Delete CtrlHT 
再 次 变换 
Ctrl+Shift+T 
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1.4 矢量 图 制作 软件 IHlustrator 介 绍 


Tllustrator 是 由 Adobe 公司 开发 的 一 款 矢量 图 绘制 图 形 软件 ， 该 软件 提供 了 多 种 形状 、 
颜色 、 复 杂 效 果 和 丰富 的 排版 ， 方 便 设 计 师 尝 试 各 种 创意 。 同 时 它 的 兼容 性 很 强 ， 可 以 和 
Photoshop 搭配 使 用 ， 是 设计 师 的 必 备 工具 。 本 节 将 以 Justrator CS6 为 例 对 Ilustrator 软 
件 进 行 简单 介绍 。 


1.4.1 认识 Ilustrator CS6 


Tllustrator 是 矢量 图 绘制 软件 ， 主 要 用 于 图 形 的 制作 ， 如 印刷 品 的 输出 ( 书籍、 包装 、 
彩 页 等 ), 企 业 V[ 手 册 设计 ( 包括 企业 形象 识别 系统 ) 企 业 LOGO 设计 、 矢 量 插画 等 。 图 1-15 
所 示 的 插画 就 是 使 用 Ilustrator 绘制 的 。 虽 然 Hiustrator 是 绘制 矢量 图 的 利器 ， 但 是 它 在 处 
理 图 像 (如 抠 图 、 色 彩 融 合 ) 的 功能 上 略 逊 于 Photoshop。 


图 1-15 ”矢量 图 


1.4.2 ”Tllustrator CS6 工 作 界 面 简介 


启动 Tlustrator CS6 后 ， 即 可 看 到 基本 的 工作 界面 ， 如 图 1-16 所 示 。Tllustrator CS6 的 
基本 工作 界面 主要 包括 菜单 栏 、 工 具 箱 、 绘 图 工作 区 和 面板 组 四 个 部 分 。 
下 面 详细 介绍 Hiustrator CS6 工作 界面 各 部 分 的 功能 。 
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图 1-16 Inustrator CS6 的 工作 界面 


1. 菜单 栏 


数 都 


llustrator 菜单 栏 主要 包括 “文件 …“" 编 辑 ”" 对 象 ”文字 "” 等 9 个 菜单 ， 
在 ”等 


“文件 ”菜单 : 和 模板 等 对 象 的 相关 命令 ， 如 “新 建 ”“ 保 
“编辑 ”菜单 : 包含 文档 处 理 中 使 用 较 多 的 编辑 操作 类 命令 ， 如 “和 


“文字 ”菜单 : 包含 与 文字 相关 的 命令 ， 如 “字体 ”“ 字 形 ” 等 
“选择 ”菜单 : 包含 各 种 选择 对 象 的 命令 


图 像 效 果 

“视图 ”菜单 : 包含 当前 文档 显示 内 容 的 相关 命令 ， 如 “预览 ” 
。 “窗口 ”菜单 : 包含 显示 或 隐 ie te ho 
。“ 帮 助 ”菜单 : 包含 各 类 帮助 内 容 和 软件 信息 

需要 注意 的 是 ， 虽然 这 些 菜单 命令 数量 很 多 ,但 是 实际 常用 的 命令 并 


“效果 ”菜单 : 包含 Illustrator 效果 和 Photoshop 效果 两 部 分 ， 用 于 
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面板 组 


具体 介绍 如 下 : 


复制 “粘贴 ”等 
“对 象 ”菜单 : 包含 与 对 象 元 素 相关 的 常用 操作 命令 ， 如 “变换 " “排列 ”等 


制作 特殊 的 图 形 


“显示 边缘 ”等 


不 多 ， 并 且 大 多 


可 以 在 面板 中 或 配合 快捷 键 使 用 。 用 户 在 使 用 时 ， 应 根据 实际 情况 灵活 运用 ， 


2. 工具 箱 


在 Jlustrator 中 ， 所 有 的 工具 都 集中 在 工具 箱 中 ， 熟 
提高 工作 效率 
会 移动 工具 箱 


掌握 它们 的 用 法 ， 能 加 快 操作 


在 默认 情况 下 ， 工 具 箱 位 于 窗口 左 侧 。 将 鼠标 放 在 工具 箱 顶 部 ， 单 击 并 向 右 拖 动 ， 可 
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以 将 工具 箱 拖 出 ， 放 在 窗口 中 的 任意 位 置 。 

外 显示 工具 快捷 键 

要 了 解 每 个 工具 的 具体 名 称 ， 可 以 将 鼠标 指针 放置 在 相应 工具 的 上 方 ， 此 时 会 出 现 一 
个 浅黄 色 的 图 标 ， 上 面 会 显示 该 工具 的 具体 名 称 ， 如 图 1-17 所 示 。 工 具名 称 后 面 括号 中 
的 字母 ， 代 表 选 择 此 工具 的 快捷 键 ， 只 要 在 键盘 上 按 下 快捷 键 代 表 的 字母 ， 即 可 快速 切换 
到 相应 的 工具 上 。 

人 显示 并 隐藏 的 工具 

在 Hiustrator 中 ， 同 类 的 工具 会 被 编 为 一 组 置 于 工具 箱 中 ， 其 典型 的 特征 就 是 在 该 工 
具 图 标的 右 下 方 有 一 个 白色 小 三 角 图 标 ， 如 图 1-18 所 示 。 

当选 择 其 中 某 个 工具 时 ,该 组 的 其 他 工具 就 被 暂时 隐藏 起 来 。 选 中 当前 工具 图 标 ， 按 
住 鼠 标 左 键 不 放 ， 就 会 显示 该 工具 组 中 的 所 有 图 标 。 如 图 1-19 所 示 ， 将 鼠标 指针 移 至 矩 
形 工具 即 会 弹出 “形状 ”工具 组 中 的 所 有 形状 工具 。 


图 1-17 显示 的 工具 名 称 图 1-18 工具 组 图 1-19 显示 工具 组 中 的 工具 


3. 绘图 工作 区 

该 区 域 用 于 “新 建 ”文档 时 放置 新 建 的 画布 。 当 画布 建 好 后 ， 可 以 在 此 区 域内 自由 编 
辑 绘制 图 像 。 
4. 面板 组 


面板 可 以 设置 数值 和 调节 功能 ， 在 Hiustrator 中 使 用 频率 非常 高 。 面 板 默认 状态 下 是 
折 释 的， 可 根据 实际 需要 对 其 进行 展开 、 分 离 或 组 合 。 

。 展 开 面板 : 单 击 面板 顶部 的 “展开 ”按钮 国 ， 即 可 展开 面板 组 。 

。 分 离 面板 组 : 将 鼠标 指针 放 在 面板 的 工具 图 标 上 ， 单 击 并 向 右 拖 动 ， 即 可 将 面板 拖 

出 ， 放 在 窗口 中 的 任意 位 置 。 


1.4.3 ”Tllustrator CS6 初 始 化 设置 


为 了 使 初学 者 更 好 地 认识 Illustrator 工具 ， 需 要 对 Tllustrator 进行 初始 化 设置 ， 具 体 
如 下 。 
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1. 工作 区 布局 
Thustrator 工具 的 工作 区 布局 主要 分 为 “基本 功能 "“ 排 ete 

版 版 面 ”“ 描 幕 ” 等 类 别 。 其 中 “基本 功能 ”是 Hiustrator 默 je 

认 的 工作 区 布局 , 作为 网 店 美工 可 以 直接 使 用 这 一 工作 布局 。 一 一 一 

如 果 需 要 更 改 布局 ,可 以 选择 菜单 栏 中 的 “窗口 ”一 “工作 区 ” ete 


命令 ， 会 弹出 如 图 1-20 所 示 的 菜单 ， 选 择 其 中 的 选项 ， 即 可 


网 店 美工 入 门 基础 


图 1-20 工作 区 布局 菜单 栏 


完成 工作 区 布局 的 更 改 。 
并 且 在 图 1-20 所 示 的 Hiustrator 工作 区 布局 菜单 栏 中 同样 可 以 对 工作 


2. 单位 设置 


区 进行 重 置 、 新 


在 Illustrator 工具 中 ， 默 认 的 单位 是 毫米 ( mm )， 也 就 是 说 ， 我 们 在 llustrator 中 绘制 


图 形 ， 其 宽度 、 高 度 都 是 以 毫米 为 单位 的 ， 如 图 1-21 所 示 . 


但 网 店 美工 使 用 Illustrator 时 同样 需要 以 像素 为 单位 。 因 此 在 新 建文 档 时 ， 需 要 将 毫 
米 换 成 像素 , 以 方便 计量 图 形 尺 寸 。 打 开 ITllustrator 工具 , 按 CtrlHN 组 合 键 , 在 弹出 的 “新 
建文 档 ” 对 话 框 中 设置 单位 为 “像素 ", 如 图 1-22 所 示 。 然 后 单 击 “确定 ” 按钮 ,创建 新 文档 。 


此 时 ， 我 们 在 文档 中 绘制 图 形 就 会 以 像素 (px ) 为 单位 


图 1-21 图 像 单位 图 1-22 “新 建文 档 


1.4.4 ”Tllustrator CS6 的 常用 工具 


”于 话 框 


Illustrator 软件 与 Photoshop 的 工具 箱 中 有 一 些 相 似 工 具 ， 但 这 些 工具 制作 出 的 效果 却 
不 同 。 下 面 介绍 一 些 常 用 的 基本 工具 ， 如 图 1-23 所 示 ， 包 括 “ 选 择 ” 工 具 、“ 直接 选 择 ” 
工具 组 、“ 钢 笔 ” 工 具 组 、“ 文 字 ” 工 具 组 、“ 形 状 ”工具 组 、“ 渐 变 ” 工 具 等 。 
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“选择 ”工具 “直接 选择 ”工具 组 


“钢笔 ”工具 组 “文字 ”工具 组 


“形状 ”工具 组 


“渐变 " 工具 


“ 抓 手 " 工具 


“ 填 色 ”与 “ 描 边 " 工具 


图 1-23 工具 箱 
“选择 ”工具 : 在 Illustrator 中 ， 如 果 要 编辑 一 个 对 象 ， 首 先 要 选中 这 个 对 象 ， 
Tllustrator 提供 了 多 个 图 形 选择 工具 ， 其 中 最 常用 的 是 “选择 工具 ” 圈 .“ 选 择 ” 工 
具 可 以 选择 当前 文档 中 包含 的 各 个 图 形 对 象 。 
“直接 选择 ”工具 组 :“ 直 接 选 择 ” 工 具 组 包括 “直接 选择 ”工具 “编辑 选择 ”工具 ， 
是 用 来 选择 和 编辑 路 径 上 的 锚 点 的 。 使 用 “直接 选择 "工具 可 以 拖 动 锚 点 改变 其 位 置 ， 
还 可 以 改变 其 曲线 状态 。 
“钢笔 ”工具 组 :“ 钢 笔 ” 工 具 组 包括 “钢笔 ”工具 、“ 添 加 锚 点 ”工具 、“ 删 除 锚 点 ” 
工具 和 “转换 锚 点 ”工具 。“ 钢 笔 ” 工 具 是 最 重要 的 绘图 工具 ， 主 要 用 来 绘制 直线 


和 曲线 ;“ 添 加 锚 点 ”工具 主要 用 来 增加 路 径 上 的 控制 点 ;“ 删 除 锚 点 ”工具 主要 用 
来 减少 路 径 上 的 控制 点 ;“ 转 化 锚 点 ”工具 主要 用 来 实现 “平滑 点 ”和 “和 角 点 ”之 
间 的 互相 转换 。 


“文字 ”工具 组 :“ 文 字 ” 工 具 组 包括 “文字 ”工具 、“ 区 域 文字 ”工具 、“ 路 径 文字 ” 
工具 、“ 直 排 文 字 ” 工 具 、“ 直 排 区 域 文字 ”工具 、“ 直 排 路 径 文字 ”工具 。 

“形状 ” 工具 组 :“ 形 状 ” 工具 组 包括 “和 矩形 ” 工具“ 圆 角 和 矩形” 工具“ 椭圆" 工具 多 
边 形 ”工具 “ 星 形 ” 工 具 和 “ 光 早 ”工具 , 该 组 工具 包 主 要 用 来 绘制 一 些 几 何 图 形 。 
“渐变 ”工具 : 在 Hiustrator 中 ， 可 以 通过 “渐变 ”工具 为 选 定 的 对 象 设置 渐变 颜色 。 
“ 抓 手 ” 工 具 :“ 抓 手 ” 工 具 主 要 用 于 移动 画布 。 
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。“ 填 色 ” 与 “ 描 边 ”工具 :“ 填 色 ” 与 “ 描 边 ”工具 可 以 为 指定 对 象 设置 填充 颜色 和 
描 边 颜色 。 


1.5 Dreamweaver 工 具 介 绍 


Dreamweaver 软件 是 业界 领先 的 可 视 化 网 页 开发 工具 ， 使 用 该 软件 可 以 快速 地 创建 网 
店 页 面 ， 极 大 地 简化 网 页 代码 编辑 。 它 完全 能 满足 网 店 对 网 页 的 编辑 需求 ， 是 零 基础 卖家 
首选 的 网 页 制作 软件 。 本 节 将 介绍 Dreamweaver 软件 在 创建 网 店 时 用 到 的 各 种 编辑 工具 。 


1.5.1 ”Dreamweaver CS6 工 作 界 面 简介 


本 书 使 用 的 版 本 是 Adobe Dreamweaver CS6， 关 于 软件 的 安装 在 此 就 不 介绍 ， 我 们 直 
接 讲解 软件 安装 后 如 何 使 用 。 
双击 运行 桌面 上 的 软件 图 标 ， 进 入 软件 界面 。 为 了 统一 ， 建 议 大 家 选择 菜单 栏 中 的 
“窗口 ”一 “工作 区 布局 ”一 “经 典 ” 命 令 ， 如 图 1-24 所 示 。 


Dw ml 
文件 中。 护 辑 () 二 看 白 入 (D 信人 0 站 式 (0 命 人 人 0 nao a em 
Cor NE ET EE cule 


本 
| 
Css 样式 @) ShifHF11 


Basiness Catalyst CtrltShifttB 

数据 库 @) Ctrl+ShNifttP10 
Cerltl0 
Ctrltre 


打开 最 近 的 项 目 新建 
加 打开 要 HTML 


二 Basiness Catalyst 让 点 
EE 


委 寺 地铺 们 
Y (无 打 开 的 净 的 》 


图 1-24 Dreamweaver 软 件 打 开 界 面 
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接 下 来 , 选择 菜单 栏 中 的 “文件 ”一 “新 建 ”命令 , 会 出 现 “ 新 建文 档 ” 窗 口 。 这 时 ， 
在 “文档 类 型 ”下 拉 框 中 选择 XHTML 1.0 Transitional, 单 击 “ 创 建 ” 按 钮 ,如 图 1-25 所 示 ， 


即 可 创建 一 个 空白 的 HTML 文档 ， 如 图 1-26 所 示 。 


新 建文 冰 让 
页 面 类 型 布局 
了 有 
WL 1 列 固定 ， 居 中 
二 x5LT( 整 页) 1 列 固 定 ， 居 中 ， 标 题 和 脚注 
国 sgk 杰 xsTCA 断 ) 1 到 者， 导 中 
号 库 项 目 1 列 液 考 , 居中 ,标题 和 刷 注 E> 
AetionSeript 2 列 固 定 , 右 侧 栏 
BR | 2 列 固定 , 右 岗 栏 、 标 题 和 脚注 
是 jmwaiit 2 列 固定 ， 左 侧 闪 
2 列 固定 , 左 侧 栏 、 标 题 和 脚注 
国 werem | 到 亚 2 列 有 态 ， 右 便 们 
tt 2 列 订 坊 ， 右 侧 疾 、 标 题 和 入 
条 | 2 列 液 者, 左 便 栏 
er 量 各 meeipt 2 列 流 考 ， 左 侧 栏 、 标 题 和 慎 广 | TL 文档 
D ASP. WET C# 3 列 固 定 
四 开 时 mn 3 列 固 定 ， 标 题 和 脚注 
5 Coldfusion 3 列 液 老 
过 Ceareion 组 3 列 瑟 者 ， 标题 和 脚注 
EW iWL5: 2 列 固定 ， 右 便 栏 、 标 题 和 央 | 文江 
Sm Jrmm.5: 3 列 固 定 ， 标 题 和 脚注 布局 Css 位 置 : | 示 加 到 文档 头 a 
附加 文件 : - 
i eA Tc taitine 


et 


下 助 D | 首 过 参数 思 | EE 


图 1-25 “新 建文 档 ” 窗 口 


[EE 


文件 (D ”编辑 (四 ”查看 (WD 新 入 (DD 修改 加 格式 J 命令 (CD 基点 GE) 窗口 四 帮助 0 


Dw sn. (lel 


证 用 
la 


<!DOCTYPE html PUBLIC "~//W3C//DTD XHTNL 1.0 Transitional//EN" 
"http://www,w3.org/TR/xhtml1/DTD/xhtmll-transitional. ded"> 
<html xmlns="http://vwu.w3.org/1999/xhtml"> 

<head> 

‘<meta http-equive"Content-Type” content="text/html; 
charset=utf-8" /> 

<title> 无 标题 文档 </ title> 

</head> 


<body> 


</body> 
-nc 


只 
| 


《> mm] 烙 式 加 无 下 关 |[ 天 ”BIz| 夺 | 和 | 具 | 上 | 标 晤 q 
[二 .7 习 @ 已 。 上 加 


图 1-26 ”空白 的 HTML 驻 档 


如 果 是 初次 安装 使 用 Dreamweaver 工具 ,创建 空白 HTML 文档 时 可 能 会 出 现 如 


所 示 的 界面 ， 这 时 单 击 “ 代 码 ” 选 项 即 可 出 现 图 1-26 所 示 的 界面 效果 。 
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Dw IC 
文件 田 ” 轧 往 四 ”查看 四 ” 禾 入 四 戎 六 加 ”格式 加。 合 令 器 站 点 宣 口 加 帮助 0D = 


证 用 


图 1-27 初次 使 用 Dreamweaver 新 建 HTML 文档 


图 1-28 即 为 软件 的 操作 界面 , 主要 由 6 部 分 组 成 , 包括 菜单 栏 、 插 入 栏 、 文 档 工 具 栏 、 
文档 窗口 、 属 性 面板 及 其 他 常用 面板 ， 每 个 部 分 的 具体 位 置 如 图 1-28 所 示 。 


Dw 4 -| | 
菜单 栏 一 ey> 坟 缠 () 亚 看 WD 括 和 ID 贡 以 人] 着 陈 ) 语 $D 站 点 人 全 四 WD 


插入 栏 总 名 | 目 日 回 . 直 . 信 间 由 办 + -| 加 - 加 
Cr 
文档 工具 栏 一 Bt 把 | 说 + 2 图] 网. 电 腺 bs 克己。 大 FX 的 
OCTTPE Dem PUL 和 AR CT oT 0 Teens 
"htcp://wvwv. v3 .org/TR/Xhtml1/DTD/xhtmll-transitional, ded”> 
<hcml xmlnse"http://www.w3.org/1999/xhtml"> 
A 


‘<meta http-equive"Content-Type” content="text/html; 
charset=utf£-8" /> 

ctc le> 无 标题 文档 </cic le> 

/head> 


< 
< 


文档 窗口 
所 一 J 一 常用 面板 


属性 面板 十 二 


图 1-28” Dreamweaver 操作 界面 
接 下 来 将 对 图 1-28 所 示 的 每 个 部 分 进行 详细 讲解 ， 具 体 如 下 。 


1. 菜单 栏 


Dreamweaver 菜单 栏 包 括 “ 文 件 ” “编辑 ”“ 查 看 ”“ 插 入 “修改 " “格式 ”“ 命 令 ” “站 
点 ” “窗口 ”“ 帮 助 ”10 个 菜单 项 ， 如 图 1-29 所 示 。 
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文件 (DD 编辑 (ED 查看 (WD) 插入 (D 修改 D ”格式 (0) 命令 (CD) 站 点 (8) 窗口 (WD 帮助 00 
图 1-29 Dreamweaver 菜 单 栏 


各 个 菜单 项 的 简单 介绍 如 下 。 

。 "文件 ”菜单 : 包含 文件 操作 的 标准 菜单 项 ， 如 “新 建 “打开 ”“ 保 存 ” 等 。“ 文 件 ” 
菜单 还 包含 各 种 其 他 选项 ， 用 于 查看 当前 文档 或 对 当前 文档 执行 操作 ， 如 “在 浏览 
器 中 预览 ”等 。 

“编辑 ”菜单 : 包含 文件 编辑 的 标准 菜单 项 ， 如 “ 剪 切 ” “拷贝 ”和 “粘贴 ”等 。 还 
包括 选择 和 查找 选项 ， 并 且 提 供 对 软件 快捷 键 编辑 器 、 标 签 库 编辑 器 和 首选 参数 编 
辑 器 的 访问 。 

“查看 ”菜单 : 用 于 选择 文档 的 视图 方式 ( 设计 视图 和 代码 视图 )， 并且 可 以 用 于 显 
示 或 隐藏 不 同类 型 的 页 面 元 素 和 工具 。 

“插入 ”菜单 : 用 于 将 各 个 对 象 插入 文档 ， 例 如 插入 图 像 、Flash 等 。 

“修改 ”菜单 : 用 于 更 改选 定 页 面 元 素 或 项 的 属性 , 使 用 此 菜单 , 可 以 编辑 标签 属性 ， 
更 改 表格 和 表格 元 素 ， 并 且 为 库 和 模板 执行 不 同 的 操作 。 

“格式 ”菜单 : 用 于 设置 文本 的 各 种 格式 和 样式 。 

“命令 ”菜单 : 提供 对 各 种 命令 的 访问 ,包括 根据 格式 参数 选择 设置 代码 格式 的 命令 ， 
以 及 优化 图 像 、 排 序 表格 等 命令 。 

“站 点 ”菜单 : 包括 站 点 操作 菜单 项 ， 这 些 菜单 项 可 用 于 创建 、 打 开 和 编辑 站 点 ， 以 
及 管理 当前 站 点 中 的 文件 。 

“窗口 ”菜单 : 提供 对 Dreamweaver 中 的 所 有 面板 、 检 查 器 和 窗口 的 访问 。 

“帮助 ”菜单 : 提供 对 Dreamweaver 帮助 文档 的 访问 ， 包 括 用 于 使 用 Dreamweaver 
以 及 创建 对 Dreamweaver 的 扩展 的 帮助 系统 ,包括 各 种 语言 的 参考 材料 。 


2. 插 入 栏 
插入 栏 集成 了 多 种 网 元 元 素 ， 包 括 超 链接 、 图 像 、 表 格 、 多 媒体 等 。 


3. 文 档 工具 栏 
文档 工具 栏 提供 了 各 种 文档 视图 窗口 ， 如 代码 、 拆 分 、 设 计 视 图 ， 还 提供 了 各 种 查看 
选项 和 一 些 常用 操作 ， 如 图 1-30 所 示 。 


Vntitled-1*# X 


| 本] 把 | 克 t | eH 图 | 网 . 加. 埠 . b% 4 要， 天 三村 


图 1-30 ”文档 工具 栏 
如 果 要 显示 或 隐藏 文档 工具 栏 ， 可 以 选择 “查看 ”一 “工具 栏 ” 一 “文档 ”命令 。 接 
下 来 介绍 其 中 几 个 常用 的 按钮 它们 的 功能 如 下 。 
。[A 现 ] “显示 代码 视图 ”按钮 : 单 击 该 按钮 文档 窗口 中 将 只 留 下 代码 视图 ， 收 起 
设计 视图 。 
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[1 “显示 代码 和 设计 视图 ”按钮 : 单 击 该 按钮 ， 文 档 窗口 中 将 同时 显示 代码 视 

图 和 设计 视图 ， 以 一 条 间隔 线 分 开 ， 拖 动 间隔 线 可 以 改变 二 者 所 占 屏幕 的 比例 。 

[设计 ] “显示 设计 视图 ”按钮 : 单 击 该 按钮 ,文档 窗口 中 收 起 代码 视图 只 留 下 设计 视图 。 

。 标题 殉 标 题 文档 “标题 ”文本 框 : 此 处 可 以 修改 文档 的 标题 ， 它 将 修改 源 代 
码头 部 <title> 标记 中 的 内 容 ， 默 认为 “无 标题 文档 ”。 

。 顺 “在 浏览 器 中 预览 /调试 ”按钮 : 单 击 可 选择 浏览 器 对 网 页 进行 预览 或 调试 。 

* 图 “刷新 ”按钮 : 在 代码 视图 中 进行 更 改 后 ， 单 击 该 按钮 可 刷新 文档 的 设计 视图 。 


4. 文档 窗口 


文档 窗口 是 Dreamweaver 最 常用 的 区 域 之 一 ， 此 处 会 显示 所 有 打开 的 文档 。 单 击 文档 
工具 栏 里 的 “代码 ”“ 拆 分 ”“ 设 计 ” 三 个 选择 按钮 可 变换 区 域 的 显示 状态 。 图 1-31 显示 
的 为 “ 拆 分 ”状态 下 的 结构 ， 左 侧 是 代码 区 ， 右 侧 是 视图 区 。 


| [3 | 证 ] 实时 视 田 be 二 
| 


a| /Wc//DTD XHTHL 1.0 
瘟 Transitional//EN" 
heep://www. v3.org/TR/xheml1/ 
区 DTD/Xboml! “eransleional ded"> 
世 | 3 hem mlne 
问 Trees 和 
| Sf 码 区 上 
bd ConEeRE= concenc- 
到 "text/html; charsec=uct-B” /> 
如 | 下。 <eaeleo 无 标题 文档 </cdcle> 
2 6 </heed> 
[sl 7 
图 日 
图 。 <woar 
20 /hem> 
Qu 
Ll 
Body’ [IE 


5. 属性 面板 


属性 面板 主要 用 于 显示 在 文档 窗口 中 所 选中 元 素 的 属性 ，Dreamweaver 允许 用 户 在 属 
性 面板 中 直接 对 元 素 的 属性 进行 修改 。 选中 的 元 素 不 同 ,属性 面板 中 内 容 也 不 一 样 。 图 1-32 
和 图 1-33 分 别 为 表格 和 图 像 的 属性 面板 。 


Ea 
图 于 格 行 四 宽 加 厂 ” [名 来 本 ee a 类 [无 ”可 
[ a A jiEg| 


到 到 到 ET 全 蝇 
到 


图 1-32 ”表格 属性 面板 


0 DT Mfr SOYADIE 可 xv Fed 7 Em 
mm 寺 风 0 4 am 三 一 友 习 ae 


图 1-33 图像 属 性 面板 
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单 击 属性 面板 右上 角 的 国 图 标 ， 可 以 打开 选项 菜单 。 如 果 属 性 面板 不 显示 ,可 以 从 
菜单 栏 中 选择 “窗口 ”一 “属性 ”命令 ,或 者 按 Ctrlt+F3 组 合 键 直接 调 出 。 


6. 其 他 常用 面板 
其 他 常用 面板 中 集合 了 网 站 编辑 与 建设 过 程 中 一 些 常 用 的 工具 。 


1.5.2 ”Dreamweaver CS6 初 始 化 设置 

为 了 使 初学 者 更 好 地 认识 Dreamweaver 工具 ， 和 希望 大 家 按照 本 书 要 求 对 Dreamweaver 
进行 初始 化 设置 ， 具 体 如 下 。 
1. 工作 区 布局 设置 

打开 Dreamweaver 工具 界面 ,选择 菜单 栏 中 的 “窗口 "一 “工作 区 布局 ”一 “经 典 ” 命令。 


2. 必 备 面板 


设置 为 “经 典 ” 模 式 后 ， 需 要 把 常用 的 三 个 面板 调 出 来 ， 也 就 是 分 别 选择 菜单 栏 “ 窗 
口 ”菜单 项 下 的 “插入 “属性 ”“ 文 件 ” 三 个 选项 ， 如 图 1-34 所 示 。 


图 1-34 工作 区 布局 模式 
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3. 新 建 默认 文档 设置 


选择 菜单 栏 中 的 “编辑 ”一 “首选 参数 ”命令 ,组合 键 为 CHU， 选 中 左 侧 分 类 中 的 
“新 建文 档 ” 菜 单 ， 右 边 就 会 出 现 对 应 的 设置 ， 如 图 1-35 所 示 ， 选 择 目前 最 常用 的 HTML 
文档 类 型 和 编码 类 型 。 


直达 下 


图 1-35 新建 HTML 默 认 文 档 的 设置 


设置 好 新 建文 档 的 首选 参数 后 ， 再 新 建 HTML 文档 时 ，Dreamweaver 就 会 按照 默认 
设置 直接 生成 所 需要 的 代码 。 


4. 代码 提示 


Dreamweaver 有 强大 的 代码 提示 功能 ， 可 以 提高 书写 代码 的 速度 。 在 “首选 参数 ”对 
话 框 中 可 设置 代码 提示 ， 选 择 “ 代 码 提示 ”菜单 项 ， 然 后 选中 “结束 标签 ”选项 中 的 第 二 
项 ， 单 击 “ 确 定 ”按钮 即 可 ， 如 图 1-36 所 示 。 


图 1-36 ”Dreamweaver 代 码 提 示 设 置 
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5. 浏览 器 设置 


对 于 初学 者 来 说 ， 计 算 机 上 必 备 的 三 大 浏览 器 分 别 是 火狐 浏览 器 (firefox )、 正 浏览 
器 和 谷歌 浏览 器 (chrome)。 建 议 将 Dreamweaver 的 默认 预览 浏览 器 设置 为 “火狐 浏览 器 ”， 
也 就 是 主 浏览 器 ， 使 用 主 浏览 器 预览 网 页 的 快捷 键 是 F12， 一 般 把 正 浏览 器 或 谷歌 浏览 
器 设 为 次 浏览 器 ， 组 合 键 为 Cxl+F12， 如 图 1-37 所 示 。 


图 1-37 ”网 页 预览 浏览 器 设置 


希望 大 家 统一 按照 本 书 要 求 对 Dreamweaver 进行 初始 化 设置 ， 从 一 开始 就 养 成 良好 的 
操作 习惯 。 


Dreamweaver“ 设 计 ” 视 图 中 的 显示 效果 只 能 作为 参考 ， 以 最 终 浏览 器 中 的 效果 
为 准 。 


1.6 本 章 小 结 


本 章 主要 介绍 了 网 店 美工 人 门 的 基础 知识 ， 包 括 网 店 美工 概述 、 图 像 处 理 软件 
Photoshop 的 介绍 、 矢 量 图 制作 软件 Hlustrator 介绍 以 及 Dreamweaver 工具 介绍 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 对 网 店 美工 的 工作 职能 及 工作 技能 有 基本 认识 ， 掌握 
Photoshop 、Illustrator 和 Dreamweaver 三 个 软件 基本 工具 的 用 途 。 
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学 习 目 标 
知识 目标 |。 了解 设 计 的 主要 元 素 中 点 、 线 、 面 的 应 用 
。 了解 色 彩 的 基本 原理 及 分 类 
。 了解 店 铺 装修 中 的 常用 字体 
。 了 解 视 觉 构 图 的 常用 方法 
技能 目标 | 。 掌握 色彩 的 搭配 技巧 ， 能 够 挑选 适合 的 店铺 色 系 搭 配 
。 掌握 字体 风格 搭配 技巧 与 字体 排版 技巧 


一 个 装修 精美 的 店铺 需要 从 设计 元 素 、 色 彩 、 文 字 、 构 图 等 各 个 方面 进行 综合 考量 ， 只 有 合理 
运用 这 些 元 素 ， 才 能 保证 店铺 的 装修 效果 。 作 为 店铺 视觉 效果 的 设计 者 ， 网 店 美工 也 应 具备 基本 的 
设计 理念 ， 让 店铺 装修 效果 更 出 众 。 本 章 将 从 设计 元 素 、 色 彩 、 文 字 、 构 图 等 方面 详细 讲解 网 店 美 
工 设计 的 基本 理念 。 
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2.1 了 解 设计 的 主要 元 素 


点 、 线 、 面 是 构成 平面 设计 的 三 大 基本 元 素 。 在 网 店 设计 中 ， 将 三 大 元 素 进行 组 合 可 
以 制作 出 丰富 的 视觉 页 面 效果 , 设计 师 只 有 对 构图 元 素 的 点 、 线 、 面 进行 恰到好处 的 把 握 ， 
才能 够 用 这 些 元 素 引 导 消 费 者 的 目标 ， 使 买 家 更 准确 地 理解 内 容 ， 促 进 信息 的 传达 。 


2.1.1 点 的 应 用 


在 设计 中 ， 点 的 作用 就 是 与 周围 元 素 形成 对 比 ， 点 缀 活跃 画面 ， 烘 托 氛 围 。 和 周围 元 
素 有 强烈 反差 的 点 ， 能 够 在 视觉 上 与 整个 画面 形成 强烈 的 对 比 ， 在 第 一 时 间 吸 引 浏览 者 的 
视觉 焦点 。 点 在 画面 中 常见 的 表现 元 素 有 花 办 (如 图 2-1 所 示 )、 绿 叶 ( 如 图 2-2 所 示 )、 
玻璃 (如 图 2-3 所 示 )、 火 花 ( 如 图 2-4 所 示 )、 几 何 色 块 (如 图 2-5 所 示 )、 碎 石 等 ， 添 加 
点 元 素 的 时 候 注意 近 实 远 虚 、 近 大 远 小 以 及 下 密 的 对 比 等 。 


a 

onze aa ~“ 志 
1 2 
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村 去 


一杯/ 好 1/ 茶 一 / 自 / 好 /时 /1 光 F= 
99e66 e000 | 
ed 
全 场 满 200 送 50/ 满 500 送 200 
ed 
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图 2-2 店铺 海报 中 前 绿叶 元 素 
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品 秒 ` 购 开 抢 


图 2-3 ”店铺 海报 中 的 玻璃 元 素 


图 2-4 ”店铺 海报 中 的 火花 元 素 


图 2-5 


店铺 海报 中 的 几何 色 块 


2.1.2” 线 的 应 用 


在 设计 中 ， 线 的 作用 在 于 引导 或 分 隔 画面 元 素 以 及 串联 画面 中 的 元 素 ， 其 形态 可 以 
表现 为 长 度 、 宽 度 、 位 置 和 方向 等 


线 、 斜 线 (一 种 视觉 效果 


在 设计 中 常见 的 有 直线 、 


~ 
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不 同 的 直线 ) 等 形态 ， 不 同形 态 的 线 表达 的 
图 2-6 所 示 ; 曲线 柔和 流畅 、 优 雅 灵动 ， 如 


展现 活力 四 射 ， 如 图 2-8 所 示 。 


| 遇见 初春 | 


CLASSIC 


局 、 修 图 、 装 修 


情感 也 各 不 相同 ， 直 线 单纯 、 大 气 、 明 确 ， 如 
旭 2-7 所 示 ; 斜 线 具 有 很 强 的 视觉 冲击 ， 可 以 


~ 初春 焕 新 季 


SPRING 


春季 新 品 上 新 
限时 8 折 尝 鲜 


| 保暖 内 衣 全 场 八 折 。， 


言 ， 画 面 中 的 文案 可 以 理解 为 


图 2-7 曲线 的 应 用 


图 2-8 斜 线 的 应 用 
线条 在 文案 中 配合 色 块 可 以 起 到 分 隔 画面 信息 的 作用 ， 让 文案 更 有 条 理 。 就 整个 画 
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下 


例如 汉字 下 面 的 几 行 英文 小 字 ， 它 们 的 存在 可 以 
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增加 画面 的 节奏 感 ， 如 图 2-9 所 示 。 线 条 在 画面 中 还 有 引导 、 指 向 、 串 联 信息 的 作用 ， 如 
图 2-10 所 示 


"ee > - 呈 | © 
天 信物 。 - 
OO 满 299 减 50/ 满 399 碱 100/ 满 599 减 200 @) 


图 2-9 英文 的 应 用 


采用 ipad 电 容 
触摸 屏 技 术 


功能 设置 键 


照明 灯 开 关 


图 2-10 ”具有 引导 作用 的 线条 


2.1.3 面 的 应 用 


在 设计 中 ， 面 的 主要 作用 在 于 承载 元 素 、 衬 托 点 和 线 。 由 于 面 的 形态 是 多 样 的 ， 不 同 
形态 的 面 在 视觉 上 有 不 同 的 作用 和 特征 。 例 如 ， 形 状 或 排列 规则 的 面 给 人 简洁 、 明 了 、 安 
定 和 秩序 的 感觉 ; 形状 或 排列 自 有 的 面具 有 柔软、 轻松 、 生 动 的 感觉 。 在 设计 中 ， 常 见 的 
面 的 形态 有 几何 形 与 自由 形 ， 具 体 介绍 如 下 


1. 几何 形 
几何 形 的 面 是 指 有 规律 的 ， 容 易 被 人 们 识别 、 理 解 和 记忆 的 图 形 ， 包 括 和 矩形 、 圆 形 、 
三 角形 、 萎 形 、 多 边 形 等 ， 以 及 线条 组 成 的 不 规则 的 几何 元 素 。 形 状 不 同 的 几何 图 形 传递 
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的 设计 情感 也 各 不 相同 。 例 如 ， 和 矩形 可 以 给 人 一 种 规矩 、 稳 重 的 感觉 ; 圆 形 给 人 柔和 、 轻 


松 的 感觉 ; 正三 角 给 人 以 坚实 、 稳 定 的 感觉 ; 不 规则 图 形 给 人 时 尚 活力 的 感 党 ， 若 背景 采 
用 不 规则 的 几何 图 形 切割 画面 ， 与 产品 配合 ， 可 以 为 画面 营造 前 后 的 层次 感 ， 避 人 免 画面 背 


景 过 于 单调 ， 如 图 2-11 与 图 2-12 所 示 。 


图 2-11 不 规则 几何 元 素 的 应 用 (1 ) 


图 2-12 不 规则 几何 元 素 的 应 用 (2 ) 


2. 自由 形 

自由 形 是 指 自然 衍生 ( 例如 果实 、 鹅 卵石 ) 或 人 为 创造 的 形态 面 ( 如 汽车 造型 、 电 器 
外 形 等 )， 往 往 是 由 曲线 、 直 线 等 自由 结合 或 分 隔 而 形成 的 面 。 自 由 形 不 具有 几何 形 的 次 
序 感 ， 较 为 自由 流畅 ， 一 般 具 有 优雅 、 自 然 的 感觉 

除了 产品 之 外 的 面 , 在 设计 中 面 元 素 还 经 常 起 到 组 合 信息 、 分 隔 画面 的 作用 , 如 图 2-13 
所 示 。 在 面 的 构图 设计 时 ， 要 善于 把 严谨 的 几何 图 形 与 活泼 的 自由 图 形 结合 起 来 ， 取 长 补 
短 ， 求 得 变化 与 统一 ， 使 设计 的 画面 图 形 既 具有 几何 图 形 的 明确 简洁 又 有 自由 形 的 活泼 与 
大 胆 。 
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”绽放 的 味 区 


严 选 鲜果 美味 传递 美好 生活 


ES /未 这 /绽放 


上 过 独特 信 牛 乳 ， 村 内 加 名 多 冀 酷 ， 还 有 洪 潜 
的 村 机 看 


当 如 隐 看 县 ， 观 一口 直 从 久 前 


图 2-13 画面 分 隔 


2.2 色彩 基础 认识 与 搭配 技巧 


店铺 的 装修 风格 与 色彩 是 紧密 相连 的 ， 浏 览 者 进入 店铺 首先 感受 到 的 就 是 店铺 的 色彩 


和 风格 。 好 的 色彩 搭配 不 仅 可 以 打动 人 心 ， 让 人 产生 共鸣 ， 而 且 还 能 提升 店铺 访问 量 。 因 


此 店铺 装修 中 的 色彩 搭配 就 显得 尤为 重要 。 本 节 将 对 色彩 的 基础 知识 和 搭配 技巧 做 具体 


2.2.1 色彩 的 属性 


说 到 色彩 ， 就 不 得 不 提 到 色彩 的 属性 ， 因 为 任何 一 种 色彩 都 具有 色相 、 明 度 和 纯度 三 


种 性 质 。 对 色彩 三 要 素 的 理解 和 掌握 ， 是 学 习 色 彩 构成 的 基础 。 下 面 对 色彩 的 三 个 


行 具体 介绍 。 
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1. 色相 

色相 是 指 各 种 色彩 的 名 称 ， 是 色彩 最 基本 的 
特征 ， 也 是 一 种 色彩 区 别 于 男 一 种 色彩 的 最 主要 
因素 。 例 如 紫色 、 绿 色 、 黄 色 等 都 代表 了 不 同 的 
色相 。 

在 色彩 中 最 基本 的 颜色 为 红色 、 黄 色 和 蓝 
色 ， 也 就 是 美术 学 中 的 三 原色 ， 三 原色 两 两 混合 
得 到 橙色 、 绿 色 、 紫 色 ， 这 三 种 颜色 也 被 称 为 间 
色 ， 将 一 种 原色 和 一 种 间 色 混合 可 以 得 出 新 的 颜 
色 ， 这 些 颜色 被 称 为 复 色 ( 包括 黄 检 、 红 栓 、 红 
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N 
紫 、 蓝 紫 、 蓝 绿 、 黄 绿 )。 根 据 颜 色 组 合 变化 的 规 四 
律 ， 将 各 种 颜色 进行 排列 ， 可 以 制 出 12 种 基本 色 图 2-14 色相 
相 ， 如 图 2-14 所 示 。 
2. 饱和 度 


饱和 度 是 指 色 彩 的 鲜艳 程度 ， 也 称 色彩 的 纯度 。 饱 和 度 取 决 于 该 色 中 含 色 成 分 和 消 色 
成 分 (灰色 ) 的 比例 。 饱 和 度 越 高 ， 色 彩 越 鲜 艳 ; 饱和 度 越 低 ， 色 彩 越 瞳 淡 。 纯 的 颜色 都 
是 高 度 饱和 的 ， 如 鲜红 、 鲜 绿 。 混 杂 上 白色 、 灰 色 或 其 他 色调 的 颜色 ， 是 不 饱和 的 颜色 ， 
如 疑 紫 、 粉 红 、 黄 褐 等 。 完 全 不 饱和 的 颜色 根本 没有 色调 , 如 黑白 之 间 的 各 种 灰色 。 图 2-15 
所 示 即 为 同一 张 图 片 低 饱 和 度 与 高 饱和 度 的 对 比 


(a) 低 饱和 度 (b) 高 饱和 度 
图 2-15” 低 饱和 度 与 高 饱和 度 


3. 明度 

明度 简单 地 说 就 是 颜色 的 明亮 程度 ,不 同 的 颜色 具有 不 同 的 明度 ,明度 越 大 ,颜色 越 亮 ， 
例如 黄色 的 明度 就 比 蓝 色 的 明度 高 ， 在 一 个 画面 中 可 以 通过 协调 不 同 明度 的 颜色 来 表达 画 
面 的 感情 ， 如 天 空 明度 比 地 面 低 ， 则 会 产生 压抑 的 感觉 。 任 何 色彩 都 存在 明暗 变化 ， 其 中 
黄色 明度 最 高 ， 紫 色 明 度 最 低 。 绿 、 红 、 蓝 、 橙 的 明度 相近 ， 为 中 间 明 度 。 另 外 ,在 同一 
色相 的 颜色 明度 也 有 从 明 到 暗 的 变化 ， 如 同色 相 的 红色 就 存在 着 从 淡 红 、 粉 红 到 大 红 等 明 
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度 变化 。 图 2-16 所 示 即 为 同一 张 图 片 低 明度 与 高 明度 的 对 比 。 


(a) 低 明 度 (b) 高 明度 


图 2-16” 低 明度 与 高 明度 


2.2.2 色彩 的 分 类 


色彩 千变万化 ， 种 类 繁多 ， 如 果 这 些 色彩 笼统 归 类 ， 可 以 分 为 白 、 灰 、 黑 等 的 无 彩色 
系 ， 以 及 红 、 黄 、 蓝 等 的 有 彩色 系 ， 对 它们 的 具体 介绍 如 下 。 


1. 无 彩色 系 

无 彩色 系 是 指 除 彩 色 以 外 的 其 他 颜色 ， 常 见 的 有 黑色 、 白 色 和 灰色 ， 它 们 没有 明显 
的 色相 偏差 .因此 也 称 为 “中 性 色 ”。 无 彩色 系 的 颜色 只 有 明度 的 变化 ， 这 里 所 说 的 灰色 
可 以 理解 为 由 黑色 与 白色 混合 的 各 种 明暗 层次 的 灰色 。 无 彩色 系 中 的 任何 一 种 颜色 都 可 以 
用 来 调和 有 彩色 系 之 间 的 搭配 ， 能 让 彩色 之 间 过 渡 更 自然 。 把 所 有 无 彩色 系 的 颜色 概括 起 
来 可 以 得 到 按 比例 变化 的 9 个 明度 层次 的 颜色 ， 从 明度 最 亮 的 白色 开始 ， 按 道 时 针 方 向 
依次 可 命名 为 白 、 亮 灰 、 浅 灰 、 亮 中 灰 、 中 灰 、 灰 、 暗 灰 、 黑 灰 和 黑 等 颜色 ， 如 图 2-17 
所 示 。 


高 | 95 日 
最 高 Wy 
浅 灰 

85 
高 Oy 
75 浅 灰 
ltGy 
略 高 | 国 65 淡 


f 和 > 
中 | 图 55 moy > 


图 2-17 无 彩色 系 
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2. 有 彩色 系 


有 彩色 是 指 带 有 某 一 种 标准 色 倾向 的 颜色 ， 光 谱 中 的 全 部 色彩 都 属于 有 彩色 。 有 彩色 
是 无 数 的 , 它 是 以 红 \ 绿 、 蓝 三 原色 为 基础 色 组 成 的 颜色 。 图 2-18 所 示 即 为 一 个 原色 、 间 色 、 
复 色 组 成 的 12 色色 相 环 。 


图 2-18 有 彩色 系 的 基本 颜色 
有 彩色 系 的 颜色 种 类 繁多 , 人 的 眼睛 可 以 分 辨 出 几 十 万 种 以 上 。 不论 是 平面 广告 设计 ， 
还 是 页 面 效 果 设 计 ， 搭 配 的 色调 基本 上 都 以 有 彩色 系 为 主 ， 因 为 有 彩色 系 能 传达 更 多 强烈 
与 丰富 的 视觉 感受 ， 如 图 2-19 所 示 。 


AR 


图 2-19 有 彩色 系 


2.2.3 ”色彩 的 搭配 


人 们 对 色彩 的 敏感 度 是 非常 强 的 ， 如 装修 网 店 首页 的 色彩 处 理 得 恰到好处 ， 会 使 店铺 
装修 效果 更 好 。 在 店铺 装修 前 ， 应 该 先 了 解 色彩 的 搭配 规则 ， 然 后 根据 店铺 的 行业 或 产品 
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特征 去 选择 适合 的 色调 。 下 面 列 出 几 点 色彩 搭配 的 技巧 。 


1. 利用 单 色 系 营造 整洁 

进行 店铺 装修 时 既 要 避免 使 用 过 多 的 颜色 , 让 人 了 眼花 练 乱 ; 也 要 避免 使 用 单一 的 色彩 ， 
以 免 产 生 单调 的 感觉 。 

新 店 装 修 时 ， 如 果 很 难 选择 出 适合 的 颜色 ， 整 个 页 面 可 以 使 用 单一 的 色彩 ， 然 后 通过 
调整 色彩 的 饱和 度 和 透明 度 使 其 产生 变化 ， 这 样 设计 出 的 页 面 不 但 不 会 单调 ， 而 且 看 起 来 
更 整洁 清爽 ， 给 人 留 下 深刻 印象 ， 如 图 2-20 所 示 。 


2. 利用 冷暖 色调 提升 页 面 质感 
不 同 的 颜色 可 以 带 给 人 不 同 的 感受 ,这 取决 于 颜色 的 “色温 "。 色 彩 学 上 根据 心理 感受 ， 


把 颜色 分 为 冷色 调和 暖色 调 ,冷色 调 色 彩 的 亮度 越 高 ， 给 人 的 感觉 越 温 暧 ; 暧 色调 色彩 的 
亮度 越 高 ， 给 人 的 感觉 越 冷 。 冷 暧 系 色调 表现 ， 如 图 2-21 所 示 。 


[下 


隔 _ 新 会 小 青 机 。 上 


鼻 .., 


图 2-20 单 色 调 页 面 图 2-21 冷暖 色 环 


使 冷色 调 

冷色 调 通常 是 指 由 青色 、 蓝 色 等 颜色 构成 的 色调 ， 在 视觉 上 有 收缩 的 作用 ， 能 给 人 以 
理智 、 冷 静 及 科技 感 和 品质 感 。 在 店铺 装修 中 ， 冷 色调 一 般 适 用 于 数码 类 产品 店铺 或 一 些 
季节 性 活动 ( 如 夏季 促销 )。 图 2-22 所 示 为 某 护肤 品 海报 ， 该 海报 就 属于 冷色 调 。 
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上 大安 量 
大 谷 量 


SP 
目 这 内 光 肌 定格 高 颜 什 


泌 要 水 330mLt 乳 小 1300 


图 2-22 冷色 调 海报 


由 暖色 调 

暖色 调 是 通常 由 给 人 以 温暖 感觉 的 红 、 橙 、 黄 等 颜色 构成 的 色调 ， 上 暖色 调 的 颜色 能 给 人 
温暖 、 活 泌 、 积 极 及 健康 的 品质 感 。 在 店铺 装修 中 ， 暧 色调 一 般 适 用 于 食品 、 儿 童 用 品类 店 
铺 或 秋季 冬季 等 一 些 季节 性 活动 。 例 如 ,图 2-23 所 示 就 是 一 个 暖色 调 的 秋装 banner ( 旗 标 )。 


出 游记 

™ 

花 的 浪漫 秋 的 收获 你 的 美丽 
国庆 出 游 秋冬 女装 氏 惠 满 199 立 减 50 


图 2-23 ”了 暖色 调 banner 


3. 利用 邻近 色 营 造 统一 感 

在 十 二 色相 环 上 任 选 一 色 ， 与 其 相距 
30” 的 颜色 被 称 邻近 色 ， 如 图 2-24 所 示 。 邻 
近 色 之 间 往 往 是 你 中 有 我 ， 我 中 有 你 。 例 如 ， 
朱红 与 橘 黄 ， 朱 红 以 红 为 主 ， 里 面 略 有 少量 
黄色 ; 橘 黄 以 黄 为 主 ， 里 面 有 少许 红色 ， 虽 
然 它们 在 色相 上 有 很 大 差别 ， 但 在 视觉 上 却 
比较 接近 。 

店铺 装修 中 ， 使 用 邻近 色 进 行 搭配 使 用 ， 
可 以 给 人 和 舒适、 自然 的 感 党 ， 因 此 这 种 色彩 
搭配 的 使 用 率 也 很 高 ， 如 图 2-25 所 示 。 


图 2-24 ”邻近 色 划 分 ( 按 色彩 三 原色 划分 ) 
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图 2-25 ”邻近 色 海 报 


4. 利用 互补 色 突 出 主 次 感 


在 色 环 上 任 选 一 个 颜色 ， 与 其 相距 180。 的 颜色 即 为 互补 色 ， 如 图 2-26 所 示 。 例 如 红 
色 与 绿色 互补 ， 蓝 色 与 橙色 互补 ， 紫 色 与 黄色 互补 


图 2-26 互 社 色 划 分 ( 按 色彩 三 原色 划分 ) 
在 店铺 装修 中 ， 使 用 互补 色 进 行 搭配 使 用 ， 可 以 使 商品 主 次 一 目 了 然 。 在 一 般 设 计 使 
用 中 互补 色 中 的 两 色 占 用 面积 比例 不 同 ， 其 中 做 主 色调 的 颜色 面积 更 大 ， 男 一 个 颜色 则 作 
为 点 缀 使 用 ， 如 图 2-27 所 示 。 


PASYHIS 


时 


图 2-27 互补 色 海报 
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2.2.4 ”挑选 适合 店铺 的 色 系 搭配 


想 要 对 店铺 进行 整体 装修 ， 色 彩 搭配 是 必须 要 做 的 ， 灵活 运用 搭配 技巧 能 让 网 店 的 装 
修 风 格 更 具 感 染 力 和 亲和力 ， 想 要 使 用 颜色 的 搭配 准确 表达 店铺 意向 并 不 是 一 件 难 事 ， 因 
为 色彩 搭配 是 有 规则 可 遵循 的 。 


1. 和 白色 系 

白色 是 全 部 可 见 光 均匀 混合 而 成 的 ， 称 为 全 光 色 ， 是 光明 的 象征 色 。 在 网 店 设计 中 ， 
白色 具有 高 级 、 科 技 的 意象 ， 一 般 需 要 和 其 他 色彩 调配 使 用 ， 也 会 用 作 页 面 背景 色 ， 如 
图 2-28 所 示 。 纯 白色 会 带 给 人 寒冷 、 严 峻 的 感觉 ， 所 以 在 运用 白色 时 ， 都 会 掺 一 些 其 
他 的 色彩 ， 如 象牙 白 、 米 白 、 乳 白 、 苹 果 白 等 。 如 果 在 一 个 包含 多 种 色彩 的 页 面 中 ， 白 
色 和 黑色 可 以 说 是 最 显眼 的 色彩 。 在 网 店 描绘 中 ， 当 白色 与 暖色 ( 赤色 、 黄 色 、 橘 亦 
色 ) 调配 时 能 够 添加 富丽 的 感受 ; 与 冷色 ( 蓝 色 、 紫 色 ) 调配 能 够 传达 清新 、 轻 快 的 


Summer Coordinate 
热门 入 口 “ 


HOT SELLING 
热 销 推荐 


i 
夏装 新 品 
NEVAWARRIVALS 
每 周三 (WED)22 oo 二 
有 
; a 6 
\ 品牌 特卖 1 
本 全 场 低 至 2 折 有 


1 MT Ba 


TIME SALE 专区 2 件 8 折 


PE 管 ， 明 … 全 … 
介入 … 大 全- 22- 


图 2-28 ”白色 系 页 面 
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2. 红色 系 


红色 是 强 有 力 、 喜 庆 的 色彩 ， 具 有 和 刺激 效果 ， 容 易 使 人 产生 冲动 ， 给 人 一 种 愤怒 、 热 
情 、 活 力 的 感觉 。 在 网 店 大 多 数 情况 下 ， 红 色 都 用 于 突出 颜色 ， 因 为 鲜明 的 红色 极 容易 吸 
引 人 们 的 目光 。 

淘宝 网 店 在 制作 活动 页 面 或 海报 时 ， 红 色 是 页 面 设计 中 使 用 频率 最 高 的 一 个 颜色 。 但 
是 在 设计 过 程 中 , 需要 把 握 好 红色 的 使 用 度 ， 如果 用 色 过 度 , 容易 造成 视觉 疲劳 和 紧张 感 。 
在 配色 时 ， 可 以 适当 加 入 橙色 、 黄 色 、 白 色 和 黑色 等 颜色 进行 点 级 ， 这 样 可 以 使 页 面 视觉 
过 渡 更 自然 。 

在 店铺 页 面 的 色彩 搭配 中 ， 红 色 和 黄色 向 来 是 中 国 传统 的 喜庆 色彩 搭配 ， 这 种 传统 而 
色调 浓烈 的 色彩 能 让 买 家 联想 到 节日 庆典 ， 给 人 的 促销 感 会 更 强烈 ， 因 此 在 大 型 网 络 购物 
节日 中 ， 经 常会 使 用 这 种 色彩 搭配 ， 如 图 2-29 所 示 。 


图 2-29 ”红色 系 页 面 


3. 橙色 系 


橙色 通常 会 给 人 一 种 朝气 活泼 的 感觉 , 但 没有 红色 那么 强烈 的 刺激 感 。 橙 色 象 征收 获 、 
富足 和 快乐 。 布 满 活力 的 橙色 会 给 人 健康 的 感觉 ， 同 时 也 是 一 种 容易 引起 食欲 的 色彩 。 所 
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以 橙色 常用 于 食物 、 卡 通 玩偶 、 家 居 用 品 等 类 别 的 网 店 ， 该 色彩 能 营造 出 积极 、 活 力 及 美 
味 等 氛围 ， 如 图 2-30 所 示 。 


潜 大 全 和 = ma 一 二 


图 2-30 栖 色 系 页 面 


4. 绿 色 系 


绿色 介 于 黄色 和 蓝 色 之 间 , 既 能 表现 出 大 自然 的 生机 勃 勃 感 , 更 能 传达 出 健康 的 感觉 ， 
因此 常常 用 于 与 自然 、 健 康 相关 的 网 店 。 绿 色 系 配色 方案 主要 适用 于 护肤 品 、 儿 童 用 品 、 
保健 品 、 特 产 等 类 目的 网 店 ， 如 图 2-31 所 示 。 


5. 蓝 色 系 

蓝 色 是 一 种 能 表现 冷静 和 理性 的 色彩 。 高 彩 度 的 蓝 色 会 营造 出 一 种 整洁 轻快 的 映像 ; 
低 彩 度 的 蓝 色 会 给 人 一 种 都 市 现代 派 的 映像 。 

在 店铺 色彩 的 应 用 中 ， 蓝 色 若 与 黄色 、 红 色 、 橙 色 等 暖色 进行 搭配 ， 页 面 的 跳跃 感 会 
比较 强 ， 这 种 强烈 的 跳跃 感 容易 感染 买 家 的 购买 情绪 ; 如 果 蓝 色 和 白色 搭配 ， 可 以 使 网 店 
显得 干净 而 简洁 ， 给 人 庄重 、 充 实 的 印象 。 

蓝 色 能 让 人 联想 到 科技 、 智 慧 及 自然 方面 的 事物 ， 主 要 适用 于 数码 产品 、 家 用 电器 、 
清洁 用 品 、 汽 车 用 品 、 医 药品 和 旅游 类 等 行业 的 网 店 ， 如 图 2-32 所 示 。 
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图 2-31 绿色 系 页 面 图 2-32 ” 蓝 色 系 页 面 


2.3 ”文字 排版 设计 


文字 是 网 店 装修 设计 中 不 可 缺少 的 部 分 ， 正 确 地 运用 字体 可 以 有 效 地 将 店铺 信 
给 买 家 ， 从 而 激发 买 家 的 购买 欲望 。 本 节 将 对 文字 的 排版 及 设计 进行 介绍 。 


2.3.1 ”常用 字体 介绍 


字体 就 是 文字 的 风格 样式 , 不 同 的 字体 给 人 的 感觉 是 不 同 的 ,如 黑体 时 尚 、 厚 习 


bo aby bo more ,Ma 


息 传递 


外 抢眼 ， 


具有 强调 的 效果 ; 仿宋 较 古 板 , 会 给 人 一 种 权威 的 感觉 。 下 面 将 对 一 些 常用 字体 进行 介绍 。 


1. 宋体 


宋体 是 店铺 页 面 中 使 用 最 广泛 的 字体 ， 其 外 形 端庄 秀美 、 具 有 浓厚 的 文艺 气息 
于 标题 设计 。 系 统 默认 的 宋体 笔画 比较 纤细 ， 但 作为 标题 分 量 不 足 ， 而 方正 大 标 宋 


， 适 用 
不 仅 具 
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有 宋体 的 秀美 ,还 具备 黑体 的 醒目 性 ， 因 此 经 常 被 用 于 女性 产品 网 店 的 设计 。 此 外 ,方正 
大 标 宋 、 大 宋 、 书 宋 、 中 宋 、 仿 宋 等 也 属于 常用 宋体 。 如 图 2-33 为 宋体 在 女装 海报 中 的 
应 用 效果 。 


~ 入 
可 爱 鲸 鱼 绣 连衣裙 
2018 年 春季 新 品 
前 100 名 五 折 优惠 , 
Eda } 局 
| 忆 
2 


图 2-33” 末 体 字 的 应 用 效果 


2. 黑 体 

黑体 字 笔 画 粗细 一 致 、 粗 壮 有 力 、 非 常 醒目 ， 具 有 强调 的 视觉 感 。 同 时 ， 其 强烈 的 商 
业 气 息 能 够 满足 客户 “大 ”的 要 求 ， 常 用 于 广告 、 导 航 以 及 商品 详情 页 等 大 面积 使 用 的 文 
字 内 容 ， 如 图 2-34 所 示 ， 线 框 标示 的 中 文字 体 就 是 使 用 了 黑体 


BY < [Fn {hy 


二 ” 二 ”| 欢度 五 一 全 场 包 邮 


图 2-34 ”黑体 字 的 应 用 效果 


3. 书法 体 

书法 体 包括 繁 书 体 、 隶 书 体 、 行 书 体 、 草 书 体 和 楷书 体 5 种 。 书 法 体 的 形式 自由 多 变 ， 
顿挫 有 力 ， 在 力量 中 融入 了 文化 气息 ， 常 用 于 书籍 类 等 具有 古典 气息 的 店铺 中 ， 图 2-35 
为 应 用 书法 体 的 页 面 效 果 。 在 店铺 装修 中 ， 书 法 体 一 般 适 用 于 一 些 具 有 中 国 特 色 的 商品 店 
铺 ， 如 茶叶 、 毛 笔 、 唐 装 等 。 
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图 2-35 书 洁 体 的 应 用 效果 


4. 美术 体 

美术 体 指 一 些 特殊 的 印刷 用 字体 ， 一 般 是 为 了 美化 排版 而 使 用 。 美 术 体 的 笔画 和 结构 
一 般 都 进行 了 一 些 形象 化 处 理 ， 常 用 于 海报 制作 或 模板 设计 的 标题 部 分 ， 若 应 用 得 当 会 有 
提升 艺术 品位 的 效果 。 常 用 的 美术 字体 包括 娃娃 体 、 金 梅 体 、 汉 易 和 文 易 等 ， 图 2-36 所 
示 即 为 美术 体 的 应 用 效果 。 


下 美味 


ED 
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[ OH HBB + OHSS ns] 
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图 2-36 ”美术 体 的 应 用 效果 


2.3.2 ”字体 风格 的 搭配 


字体 风格 是 指 通过 文字 的 视觉 体现 产生 不 同 的 视觉 联想 ， 选 择 合适 的 字体 风格 不 仅 可 
以 泻 染 版 面 氛 围 ， 还 能 便于 受众 对 主题 的 理解 与 消化 。 下 面 对 淘 宝 、 天 猫 常 用 的 字体 等 进 
行 介绍 。 
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1. 男性 字体 


网 店 中 剃 须 刀 、 竞 技 游 戏 、 足 球 等 商品 的 消费 人 群 主要 为 男性 ， 所 以 设计 这 些 产品 的 
页 面 时 一 般 使 用 笔画 粗 的 字体 或 带 棱角 的 字体 。 常 用 的 男性 字体 有 方正 粗 谭 黑 简体 、 造 字 
工 坊 劲 黑 、 汉 仪 攻心 体 简 等 。 图 2-37 所 示 的 墨镜 海报 和 图 2-38 所 示 的 剃 须 刀 海 报 中 使 用 
的 字体 就 能 很 好 地 展现 男性 的 硬朗 、 粗 狂 、 力 量 、 大 气 等 特点 。 


J 又 站 二 们 村 


Ee 


图 2-38 ”男性 字体 搭配 效果 (2 ) 


2. 女性 字体 

在 鲜花 类 、 珠 宝 配 饰 类 、 女 性 用 品 、 护 肤 品 、 化 妆 品 等 以 女性 为 消费 者 主体 的 网 店 设计 
中 ,一般 采用 纤细 秀美 、 时 尚 、 线 条 流畅 ,字形 有 粗细 变化 的 字体 ， 如 宋体 、 方 正 纤 黑 简体 、 
方正 兰亭 黑 简 体 等 。 图 2-39 和 图 2-40 分 别 展示 了 护肤 品 海报 与 女装 海报 中 的 字体 设计 效果 。 


图 2-39 ” 妈 性 字体 搭配 效果 (1 ) 
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图 2-40 ”女性 字体 搭配 效果 (2) 


3. 儿童 字体 

在 零食 、 玩 具 、 童 装 、 卡 通 漫画 等 以 儿童 为 消费 主体 的 网 店 设计 中 ,一般 采 用 活泼 、 
可 爱 、 呆 萌 、 肥 圆 、 调 皮 的 字体 ， 如 汉 仪 娃娃 篆 简 、 方 正 胖 娃 简体 、 方 正 少儿 简体 等 。 
图 2-41 所 示 的 海报 中 ， 字 体 圆润 去 趣 ， 很 符合 卡通 、 可 爱 、 调 皮 的 特点 


图 2-41 ”儿童 字体 搭配 效果 


4. 促销 型 字体 


促销 文案 涉及 多 个 行业 , 重点 在 于 突出 促销 信息 ， 因 此 一 般 采用 粗 、 大 、 醒 目的 字体 ， 
并 配合 适当 的 倾斜 、 文 字 变 形 等 特效 增加 促销 效果 。 一 般 选 择 笔画 较 粗 的 字体 ， 如 黑体 、 
方正 粗 黑 、 方 正 粗 谭 黑 简 体 等 。 图 2-42 为 促销 型 字体 的 应 用 效果 。 


047 


AAA 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


= SPORTS 
# 运 动 让 生命 更 精彩 # 


3 | 
图 2-42 ”促销 型 字 休 搭配 效 果 


2.3.3 ”字体 的 排版 技巧 


在 淘宝 天 猫 的 视觉 设计 中 ， 文 字 除 了 具有 传达 促销 信息 的 作用 外 ， 还 是 一 种 重要 的 视 
觉 元 素 ， 字体 的 排版 在 画面 空间 、 结 构 上 都 是 很 重要 的 因素 。 下 面 对 淘 宝 、 天 猫 视觉 设计 
中 常用 的 排版 技巧 进行 介绍 。 

* 文字 的 统一 : 在 进行 文字 编辑 时 ， 需 要 把 握 文字 的 统一 性 ， 即 文字 的 字体 、 粗 细 、 

大 小 与 颜色 在 搭配 组 合 上 让 买 家 有 一 种 关联 的 感觉 ， 这 样 文字 组 合 才 不 会 显得 松散 
杂乱 。 

。 字 体 的 选用 与 变化 : 对 广告 文案 进行 排版 时 ， 可 以 选择 2 ~ 3 种 匹配 度 较 高 的 字体 ， 

这 样 的 字体 搭配 可 以 产生 最 佳 的 视觉 效果 。 和 否则 ， 字 体 过 多 会 产生 零乱 的 感 党 ， 容 
易 分 散 买 家 的 注意 力 ， 使 买 家 产生 视觉 疲劳 。 在 选择 字体 时 ， 可 考虑 加 粗 、 变 细 、 
拉 长 、 压 扁 或 调整 行 间 距 来 改变 字体 大 小 ， 产 生 丰 富 多 彩 的 视觉 效果 。 

。 文 字 的 层次 布局 : 在 淘宝 视觉 营销 设计 中 , 文案 的 显示 并 非 就 是 简单 的 堆砌 ， 而 是 
有 层次 的 ， 通 常 是 按 重 要 程度 设置 文本 的 显示 级 别 ， 引 导 买 家 浏览 文案 的 顺序 ， 首 
先 映 入 买 家 眼帘 的 应 该 是 作品 强调 的 重点 。 在 进行 文字 的 编排 时 ,可 利用 字体 .粗细 、 
大 小 与 颜色 的 对 比 来 设计 文本 的 显示 级 别 。 


2.4 视觉 构图 方法 


在 店铺 进行 视觉 营销 设计 时 ， 需 要 根据 商品 与 主题 的 要 求 ， 将 要 表现 的 信息 合理 地 组 
织 起 来 ， 构 成 一 个 协调 的 画面 。 良 好 的 视觉 构图 能 让 店铺 更 出 彩 ， 下 面 对 常 见 的 构图 方法 
进行 介绍 。 
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1. 中 心 构 图 

在 画面 中 心 位 置 安排 元 素 , 如 商品 或 促销 文案 。 这 种 构图 方式 给 人 稳定 、 简 下 的 局 二 
可 产生 中 心 透 视 感 ， 如 图 2-43 所 示 。 在 使 用 该 构图 方式 时 ， 为 了 避免 画面 呆板 ， 通常 会 
使 用 小 面积 的 形状 、 线 条 或 装饰 元 素 进行 灵活 搭配 ， 增 强 画 面 的 灵动 感 。 


AS 全 iv RS 
@Qe@ 7/ 


<< 下 单 即 享 好 礼 ， 情 人 节 狂 欢 日 >> 


一 带 汉 YY 活动 时 间 : 8 月 21 日 -8 月 29 日 和 
S 名 


图 2-43 ”中 心 构图 


2. 九宫 格 构图 
九宫 格 构图 是 指 将 画面 平均 分 成 9 个 格子 ， 在 4 个 交叉 点 中 ,选择 一 个 点 或 者 两 个 点 


作为 画面 的 主 物体 位 置 ， 同 时 其 他 点 还 应 适当 考虑 平衡 与 对 比 等 因素 。 该 构图 方式 具有 变 
化 与 动感 ， 是 常用 的 构图 方式 ， 如 图 2-44 所 示 


READY CO 


201 4 吉英 从 风尚 中 步 畦 , 区 生来 


图 2-44 九宫 格 枸 图 


3. 对 角 线 构图 

对 角 线 构图 是 指 画面 主题 居于 画面 的 斜 对 角 位 置 ， 能 够 更 好 呈现 主题 的 立体 效果 ， 表 
现 出 立体 效果 。 与 中 心 点 构图 方式 相 比 ， 该 构图 方式 打破 了 平衡 ， 具 有 活泼 生动 的 特点 
图 2-45 所 示 的 钢笔 采用 了 对 角 线 构图 的 方式 ， 让 钢笔 突破 画面 ， 更 具 立 体感 。 
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图 2-45 对 角 线 构图 


4. 三 角形 构图 

三 角形 构图 就 是 以 3 个 视觉 中 心 为 元 素 的 主要 位 置 ， 形 成 一 个 稳定 的 三 角形 。 该 三 角 
形 可 以 是 正三 角形 ， 也 可 以 是 斜 三 角形 或 倒 三 角形 ， 其 中 斜 三 角 较 为 常用 ， 也 较为 灵活 。 
三 角形 构图 具有 安定 、 均 衡 但 不 失灵 活 的 特点 。 图 2-46 所 示 的 饶 装 商品 与 营 米 及 红豆 构 
成 了 三 角形 ， 给 人 强烈 的 视觉 感 ， 便 于 受众 记忆 


图 2-46 ”三 角形 构图 


5. 黄金 分 割 构图 
黄金 分 割 构图 是 指 将 画面 一 分 为 二 ， 其 中 比较 大 的 部 分 与 较 小 的 部 分 之 比 等 于 整体 与 
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较 大 部 分 之 比 ， 其 比值 为 1 : 0.618。0.618 是 公认 的 最 具 美学 价值 的 比例 ， 具 有 艺术 性 与 
和 谐 性 。 图 2-47 所 示 的 图 片 中 ， 荔 枝 与 文字 的 布局 符合 黄金 分 割 构图 。 


SONNET TONER 
全 场 满 200 减 50/ 满 500 减 150 


SE 酸 甜 可 口 , 机 香 愉 人 
鲜美 ) 多 ) 汗 


图 2-47 黄 割 分 审 构 图 


2.5 本 章 小 结 


本 章 主要 介绍 了 网 店 美工 设计 的 基本 理念 ， 包括 了 解 设计 的 主要 元 素 、 色 彩 基础 与 措 
配 技巧 、 文 字 排版 设计 以 及 视觉 构图 方法 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 了 解 设计 的 主要 元 素 ， 掌 握 色彩 的 搭配 技巧 与 文字 的 
排版 技巧 ， 能 对 网 店 的 整体 搭配 与 布局 进行 设计 。 
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商品 图 片 的 修复 与 修饰 


学 习 目 标 

知识 目标 |。 了解 商品 图 片 的 尺寸 要 求 
。 熟悉 商品 文字 的 常用 效果 

技能 目标 | 。 掌握 图 片 的 裁剪 方法 及 技巧 
。 掌握 商品 图 片 色调 调整 的 方法 
。 掌握 商品 图 层 样式 及 滤 镜 的 使 用 方法 
。 掌握 商品 图 片 抠 图 及 换 背 景 的 方法 
。 掌握 商品 图 片 文字 添加 方法 


网 店 中 的 图 片 是 网 店 的 灵魂 ， 要 想 将 网 店 做 好 ， 就 一 定 要 处 理 好 网 店 的 图 片 ， 好 的 图 片 可 以 提 
高 店铺 成 交 量 。 商 品 图 片 不 但 受 拍摄 水 平 的 影响 ， 还 与 后 期 的 上 传 要 求 及 美化 处 理 息息相关 ， 本 章 
将 介绍 如 何 通过 Photoshop 软 件 对 图 片 进行 处 理 。 
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3.1 ”商品 图 片 的 多 样 裁剪 


淘宝 中 的 不 同 模块 对 图 片 尺寸 有 不 同 的 要 求 ， 拍 摄 的 商品 图 片 或 因为 尺寸 不 合适 无 法 
添加 到 对 应 的 模块 中 ， 或 无 法 在 模块 中 正常 显示 ， 此 时 ， 就 需要 对 商品 图 片 进行 裁剪 、 旋 
转 、 矫 正 等 操作 。 本 节 将 介绍 如 何 调整 淘宝 主 图 与 商品 细节 图 的 尺寸 。 


3.1.1 ”根据 需求 裁剪 图 片 


当 商 品 图 片 的 尺寸 及 构图 不 符合 实际 需求 或 者 需要 商品 某 部 分 细节 图 时 ， 可 以 对 商品 
图 片 进行 裁剪 操作 。 常 见 的 裁剪 方式 有 裁剪 为 正方 形 、 按 既定 尺寸 裁剪 和 裁剪 商品 细节 图 
等 ， 下 面 分 别 进行 介绍 。 
1. 裁剪 正方 形 商品 图 片 

顾客 在 网 店 中 购买 商品 时 ， 第 一 眼看 到 的 商品 图 片 即 为 正方 形 尺寸 的 ， 而 拍摄 出 的 商 
品 图 片 不 一 定 都 符合 设计 师 的 要 求 ， 此 时 需要 通过 裁剪 工具 将 商品 图 片 裁剪 为 正方 形 再 进 
行 上 传 。 图 3-1 展示 了 某 手 表 主 图 裁剪 前 后 的 对 比 ， 该 主 图 经 过 裁剪 后 才 成 功 上 传 至 店铺 
后 台 。 其 具体 裁剪 方法 介绍 如 下 。 


(a) 裁剪 前 (b) 裁剪 后 
图 3-1 商品 主 图 裁剪 前 后 对 比 
人 SS39》 使 用 Photoshop CS6 软件 打开 素材 文件 “手表 主 图 jpg"， 如 图 3-2 所 示 。 从 
该 图 中 可 以 看 到 拍摄 的 商品 图 片 为 长 方形 ， 不 符合 店铺 商品 主 图 的 要 求 。 
EE 选择 “裁剪 工具 ” 国 ， 按 住 Shift 键 的 同时 按 住 鼠标 左 键 在 图 像 中 拖 中 出 一 
个 裁 前 区域， 松 开 鼠 标 即 可 绘制 正方 形 裁剪 框 ， 如 图 3-3 所 示 。 
EH》 确定 裁 前 区 域 后 按 Enter 键 完成 正方 形 裁剪 ， 效 果 图 如 图 3-4 所 示 。 
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图 3-3 ”裁剪 正方 形 图 像 


图 3-4 正方形 裁剪 效果 


2. 按 需 求 尺 寸 裁剪 图 片 

上 传 商品 图 片 时 ， 一些 图 片 需 要 满足 固定 尺寸 要 求 才 可 以 上 传 ， 此 时 需要 将 商品 图 片 
按 既 定 尺寸 进行 裁 前 。 本 案例 根据 750 像素 x 750 像素 进行 演示 ， 对 比 图 如 图 3-5 所 示 。 
其 操作 方式 如 下 


(a) 更 改 前 (b) 更 改 后 
图 3-5 更改 画布 大 小 对 比 图 


EE 使 用 Photoshop CS6 软件 打开 素材 文件 “月 饼 jpg"， 如 图 3-6 所 示 。 按 
CtrlHJ 组 合 键 复 制 背景 图 层 。 
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图 3-6 ”素材 文件 


人 ES 选择 “图 像 ” 一 “画布 大 小 ”命令 , 打开 “画布 大 小 ”对 话 框 , 设置 “高 度 ” 
与 “宽度 ” 均 为 750 像素 ， 如 图 3-7 所 示 ， 单 击 “确定 ”按钮 


图 3-7 更 改 图 像 大 小 


EY 远 择 “移动 工具 ” 国 移 动 素材 图 至 如 图 3-5 (b ) 所 示 位 置 。 按 Ctrl+S 组 合 
键 保存 文件 。 
3. 裁剪 商品 细节 图 

网 店 中 的 商品 图 片 往往 更 容易 吸引 消 
费 者 关注 ， 而 商品 的 细节 图 片 是 影响 消费 
者 下 单 的 要 素 之 一 。 大 量 的 细节 图 片 是 全 
面 展现 商品 外 观 的 最 好 方法 ， 细 节 图 可 以 
直接 使 用 拍摄 的 图 片 进行 裁剪 ， 但 是 这 种 
方法 只 适用 于 高 质量 的 清晰 图 片 。 
图 3-8 所 示 即 一 款 包 包 的 商品 图 片 ， 其 
右上 角 的 商品 细节 图 可 以 清晰 地 展示 商品 


图 3-8 某 款 包 包 商品 细节 图 
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纹路 ， 将 商品 的 优点 很 好 地 展现 给 消费 者 。 该 商品 细节 图 具体 操作 制作 方法 如 下 。 

人 GE39 使 用 Photoshop CS6 软件 打开 素材 文件 “手提 包 高 清 图 jpg”， 如 图 3-9 所 示 。 
按 CtrltJ 组 合 键 复制 图 层 。 
人 ES 远 择 “椭圆 框 选 工具 ” 畏 ， 按 住 Shift 键 在 如 图 3-10 所 示 的 位 置 绘制 一 个 
圆 形 选区 ， 按 Ctrl+J 组 合 键 复制 选区 框 选 的 部 分 图 像 。 


图 3-9 ”素材 文件 图 3-10” 框 选 细节 图 区 域 


GE 选择 “文件 一“ 新建 ”命令 ， 在 弹出 的 “新 建 ” 面 板 中 填写 画布 名 称 并 设 
置 画布 大 小 ， 具 体 参数 如 图 3-11 所 示 。 单 击 “ 确 定 ” 按 钮 完成 创建 。 

GEZ9 将 “手提 包 高 清 图 ”文档 中 的 素材 图 片 添加 至 “手提 包 细 节 图 ”画布 ， 按 
CtrlHT 组 合 键 ， 调 出 变形 选 框 ， 调 整 图 片 位 置 及 大 小 ， 如 图 3-12 所 示 。 按 Enter 键 确定 操 
作 ， 效 果 图 如 图 3-13 所 示 。 


名 称 ( 册 : 手提 包 细节 图 
预 设 (P): 自 定 


A = 
宽度 (W): 900 外 素 ~ 柳生 RD) 


高 度 (tt): 800 ”| 像素 本 
分 辩 素 (R): 72 像素 /英寸 ~ 
凑 色 模式 (M): RGB 颜色 ~ 8 位 - 
背景 内 容 (G): 白色 A 


高 级 


图 3-11 新 建 画 布 图 3-12 ”调整 素材 大 小 
GE 按照 step4 的 方法 将 细节 图 片 添加 至 该 画布 中 ， 效 果 如 图 3-14 所 示 。 
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图 3-13 效果 图 图 3-14 ”调整 图 片 大 小 及 位 置 


片 的 修复 与 修饰 


HB》 选中 细节 图 所 在 的 图 层 ， 选 择 “图 层 ” 一 “图 层 样式 ”一 “ 描 边 ”命令 设置 
描 边 , 具体 参数 设置 如 图 3-15 所 示 , 设置 完成 后 单 击 “ 确 定 ” 按 钮 。 效 果 图 如 图 3-8 所 示 。 
按 Ctrl+S 组 合 键 保存 图 片 。 


er 
ER | 
EN 大 hg: 日。 人 来 
站 位 置 B: 外 部 ~ 
口 纹理 混合 模式 加 :正常 ~ 


口内 阴影 - 
回 夫 发 光 
口 光泽 颜色 
口 颜色 到 加 
口 新 变 到 加 R:189 G:182 B:182 
回 图 过 到 加 
回话 光 Ot 
回报 时 [Er Er | 


图 3-15 设置 描记 参数 


3.1.2 ”裁剪 矫正 倾斜 的 图 片 


拍摄 一 些 商 品 图 片 时 ， 为 了 拍摄 方便 可 能 会 将 相机 倾斜 拍摄 ， 因 此 拍摄 的 图 片 可 
能 出 现 倾斜 的 问题 ， 这 时 即 可 通过 “ 拉 直 ”或 者 旋转 的 方式 将 倾斜 的 图 片 调整 到 正确 的 
位 置 。 
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1. 使 用 “ 拉 直 ”按钮 调整 倾斜 图 片 
“ 拉 直 ”是 Photoshop 中 用 于 调整 倾斜 图 片 的 常用 方法 之 一 ， 图 3-16 展示 了 一 瓶 矿泉 
水 的 商品 图 片 矫 正 前 后 的 对 比 。 矫 正 倾斜 图 片 的 具体 操作 制作 方法 如 下 。 


(a) 矫正 前 (b) 矫正 后 
图 3-16 ”矫正 前 后 对 比 图 
使 用 Photoshop CS6 软件 打开 素材 文件 “矿泉 水 jpg"， 如 图 3-17 所 示 。 


ER 


吕 日 嚼 :> 


图 3-17 打开 素材 图 
GE 远 择 “ 裁 前 工具 ” 国 I, 图 片 中 会 自动 显示 出 裁剪 区 域 , 在 选项 栏 中 单 击 “ 拉 
直 ” 按 饵 轿 ， 如 图 3-18 所 示 。 


坟 只 条 裁 章 的 像素 


图 3-18 单 击 “ 拉 直 ”按钮 


人 GE》 在 如 图 3-19 所 示 的 位 置 ， 沿 箭头 标注 方向 拖 动 鼠 标 ， 调 整 贷 斜 角度 。 按 
Enter 键 确定 操作 ， 效 果 图 如 图 3-16 (b ) 所 示 。 
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图 3-19 调整 倾斜 值 置 


2. 使 用 旋转 工具 调整 倾斜 图 片 

裁剪 工具 中 的 旋转 工具 也 是 矫正 倾斜 图 片 的 常用 方法 之 一 ， 图 3-20 即 一 款 杯子 的 商 
品 图 片 调整 前 后 的 对 比 ， 具 体操 作 方 法 如 下 。 

3》 使 用 Photoshop CS6 软件 打开 素材 文件 “杯子 .png"， 如 图 3-21 所 示 。 从 该 
图 中 可 以 看 出 ， 这 个 杯子 有 明显 的 倾斜 。 


站 革 、 
三 中 
(a) 调整 前 (b) 调整 后 
图 3-20 ”倾斜 图 片 调 整 前 后 图 3-21 杯子 素材 


S33 选择 “ 裁 前 工具 ” 国 ， 将 鼠标 放置 在 裁剪 框 外 ， 当 指针 变 为 如 图 3-22 所 示 
红 框 框 选 的 箭头 时 ， 拖 中 鼠标 旋转 图 像 ， 如 图 3-23 所 示 。 按 Enter 键 完成 倾斜 调整 ， 效 果 
图 如 图 3-20 (b ) 所 示 。 
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图 3-22 ”调整 倾斜 的 图 像 图 3-23 ”旋转 图 像 


3.2 调整 商品 图 片 的 色调 


色彩 在 淘宝 图 片 中 有 着 至 关 重 要 的 作用 ， 合 适 的 色彩 不 仅 可 以 提升 商品 图 片 的 画 质 还 
可 以 起 到 情绪 泻 染 的 作用 。 但 在 商品 图 片 拍摄 过 程 中 ， 摄 影 器 材 、 环 境 等 的 限制 ， 可 能 导 
致 拍摄 的 商品 图 片 的 色彩 并 不 理想 ， 此 时 就 需要 进行 调 色 。 如 图 3-24 所 示 ， 原 片 的 画面 
色彩 饱和 度 过 低 ， 整 体 画 面 因 为 色彩 不 强 的 原因 显得 灰 蒙 蒙 ， 缺 乏 生 机 ， 而 通过 调 色 后 则 
变 得 焕然 一 新 。 本 节 将 讲述 一 下 调整 商品 图 片 色调 的 技巧 。 


(a) 调 色 前 (b) 调 色 后 
图 3-24 图片 调 色 前 后 的 效果 
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3.2.1 ”提高 图 片 的 亮度 与 鲜艳 度 


提高 图 片 的 亮度 和 鲜艳 度 可 以 使 商品 得 到 更 好 的 表现 ， 从 而 增加 画面 美感 度 。 在 
Photoshop 中 ， 调 整 图 片 亮度 与 鲜艳 度 的 方法 有 多 种 ， 例 如 调整 图 片 的 亮度 和 对 比 度 、 调 
整 图 片 曝光 度 、 调 整 图 片 的 色 阶 、 调 整 图 片 曲线 、 调 整 图 片 色相 /饱和 度 等 。 下 面 将 用 不 
同 示例 对 这 些 调 色 方法 逐一 介绍 。 


1. 调整 图 片 亮 度 和 对 比 度 

由 于 天 气 、 拍 摄 技 术 等 外 界 因 素 影响 , 拍摄 的 宝贝 图 片 往往 会 出 现 偏 瞳 或 偏 亮 的 情况 ， 
此 时 就 可 以 对 图 片 的 亮度 和 对 比 度 进行 调整 。 以 图 3-25 所 示 的 运动 鞋 图 片 为 例 ， 图 中 的 
运动 鞋 亮度 不 够 ,整体 比较 灰暗 ， 此 时 ， 需 要 调整 图 片 的 亮度 、 对 比 度 。 在 Photoshop 
CS6 中 选择 “图 像 ” 一 “调整 ”一 “亮度 /对 比 度 ” 命 令 , 打开 “亮度 / 对比度” 对 话 框 ， 
设置 如 图 3-26 所 示 的 参数 。 单 击 “确定 ”按钮 ， 效 果 图 如 图 3-27 所 示 。 


器 使 用 | 版 (L) 回 和 OpP) 


图 3-25 ”素材 图 片 图 3-26 ”设置 亮度 /对 比 度 参 数 图 3-27 效果 图 


2. 调整 图 片 曝光 度 

拍照 时 曝光 不 足 或 者 曝光 过 度 可 能 会 引起 照片 过 暗 或 者 过 亮 。 以 图 3-28 所 示 的 珠宝 
图 片 为 例 ， 图 中 的 珠宝 由 于 曝光 不 足 导致 画面 灰暗 ， 此 时 ， 需 要 调整 图 片 的 曝光 度 。 在 
Photoshop CS6 中 选择 “图 像 ”一 “调整 ”一 “曝光 度 ” 命 令 ， 打 开 “ 曝 光度 ”对 话 框 ， 
设置 如 图 3-29 所 示 的 参数 。 单 击 “ 确 定 ” 按 钮 ， 效 果 图 如 图 3-30 所 示 。 


图 3-28 素材 文件 图 3-29 设置 曝光 度 参 数 图 3-30 ”效果 图 
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3. 调整 图 片 色 阶 

处 理 图 像 色调 还 有 一 种 常用 的 方法 即 为 调 
整 “ 色 阶 ”。 以 图 3-31 所 示 的 帽子 图 片 为 例 ， 图 
片 中 的 帽子 作为 商品 图 片 过 于 灰暗 ， 此 时 ， 可 以 
用 色 阶 来 调整 图 片 的 亮度 。 在 Photoshop CS6 中 
选择 “图 像 ”一 “调整 ”一 “ 色 阶 ”命令 ， 打 开 
“ 色 阶 ”对 话 框 ， 设 置 如 图 3-32 所 示 的 参数 。 单 
击 “确定 ” 按 钮 ， 效 果 图 如 图 3-33 所 示 。 


图 3-32 设置 色 阶 参数 图 3-33 ”效果 图 


4. 调整 图 片 曲线 

“曲线 ”命令 可 对 图 片 的 色彩 、 亮 度 和 对 比 度 等 进行 调整 ， 使 图 片 颜色 更 加 美观 ， 是 
调整 网 店 商品 图 片 色彩 时 最 常用 的 一 种 操作 。 以 图 3-34 所 示 的 嘴唇 图 片 为 例 ， 图 片 中 嘴 
展 的 颜色 不 够 鲜艳 、 整 体 画面 灰暗 ， 不 足以 吸引 消费 者 。 此 时 需要 用 曲线 来 调整 图 片 的 色 
彩 和 亮度 等 。 在 Photoshop CS6 中 选择 “图 像 ” 一 “调整 ”一 “曲线 ”命令 ,打开 “曲线 ” 
对 话 框 ,设置 如 图 3-35 所 示 的 参数 。 单 击 “ 确 定 ” 按 钮 ， 效 果 图 如 图 3-36 所 示 。 


图 3-34 素材 图 片 图 3-35 设置 曲线 参数 图 3-36 ”效果 图 
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5. 调整 图 片 色相 /饱和 度 

使 用 “色相 /饱和 度 ” 命 令 可 以 调整 图 片 全 图 或 者 单个 颜色 的 色相 、 饱 和 度 和 明度 ， 
常用 于 处 理 图 片 中 不 协调 的 单一 颜色 。 以 图 3-37 的 化 妆 品 图 片 为 例 ， 图 中 商品 的 饱和 度 
明显 不 够 ， 此 时 需要 用 “色相 /饱和 度 ”命令 来 调整 图 片 的 色相 和 饱和 度 。 在 Photoshop 
CS6 中 选择 “图 像 ” 一 “调整 ”一 “色相 /人 饱和 度 ” 命 令 ， 打 开 “ 色 相 / 饱 和 度 ” 对 话 框 ， 
设置 如 图 3-38 所 示 的 参数 。 单 击 “确定 ”按钮 ， 效 果 图 如 图 3-39 所 示 。 


图 3-37 素材 图 片 图 3-38 设置 色相 /饱和 度 参 数 图 3-39 效果 图 


3.2.2 ”处 理 偏 色 的 图 片 


偏 色 指正 常 的 色彩 在 显示 时 出 现 不 正确 的 颜色 ， 如 偏 红 、 偏 绿 等 。 在 拍摄 的 过 程 中 ， 
由 于 光线 或 角度 的 问题 ， 拍 摄 的 照片 有 可 能 存在 偏 色 的 情况 。 这 时 就 需要 使 用 Photoshop 
软件 对 图 像 进行 处 理 ， 图 3-40 所 示 即 为 樱桃 商品 图 片 处 理 偏 色 前 后 的 对 比 图 ， 处 理 后 的 
图 片 颜色 更 鲜艳 。 其 具体 处 理 方法 介绍 如 下 。 


(a) 处 理 前 (b) 处 理 后 
图 3-40 ”处 理 偏 色 图 片 前 后 对 比 


使 用 Photoshop CS6 软件 打开 素材 文件 “ 偏 黄 的 樱桃 png"， 如 图 3-41 所 示 。 

选择 “图 像 ”一 “调整 ”一 “色彩 平衡 ”命令 ， 打 开 “ 色 彩 平衡 ”对 话 
框 ， 具 体 参数 设置 如 图 3-42 所 示 。 单 击 “ 确 定 ”按钮 完成 操作 ， 效 果 图 如 图 3-40 (b ) 
所 示 。 
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图 3-41 偏 黄 的 楼 桃 图 3-42 色彩 平衡 参数 设置 


3.3 ”美化 精 修 图 片 


在 选取 商品 图 片 素材 时 ， 图 片 素材 中 往往 会 存在 污点 、 瑕 症 以 及 商品 主体 不 突出 的 问 
题 ， 这 时 就 需要 利用 Photoshop 提供 的 修饰 工具 将 其 消除 。 本 节 将 针对 修饰 工具 的 相关 内 
容 进 行 讲解 。 


3.3.1 ”快速 修复 商品 中 的 细小 瑕 症 

修复 商品 细小 瑕 疯 的 方法 有 很 多 种 ， 如 污点 修复 画笔 工具 、 修 复 画 笔 工具 、 修 补 工具 、 
仿制 图 章 工具 等 ， 下 面 通过 不 同 案例 对 常用 的 图 像 修饰 工具 的 操作 方法 进行 逐一 介绍 。 
1. 用 “污点 修复 画笔 工具 ”修复 瑕 冶 


“修复 污点 画笔 工具 "主要 用 于 快速 修复 图 像 中 的 斑点 或 者 小 块 杂 物 等 ,如 图 3-43 所 示 ， 
陶瓷 缸 经 过 修复 后 ， 表 面 的 污点 都 被 修复 干净 。 具 体 修 复方 法 如 下 。 


(a) 修复 前 (b) 修复 前 
图 3-43 ”污点 修复 前 后 对 比 


3》 使 用 Photoshop CS6 软件 打开 素材 文件 “ 脏 脏 的 陶瓷 缸 jpg”, 如 图 3-44 所 示 。 
SEE》 人 选择 “污点 修复 画笔 工具 ” 国 ， 根据 污点 大 小 按 [ 和 ] 键 调整 画笔 大 小 ， 
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在 需要 处 理 的 污点 上 进行 涂抹 ， 如 图 3-45 所 示 ， 污 点 即刻 消失 。 
GE》 按照 Step2 的 方法 清除 其 余 污点 。 污 点 去 除 后 的 效果 如 图 3-46 所 示 。 


图 3-44” 脏 脏 的 陶瓷 铭 图 3-45 去除 污点 图 3-46 污点 修复 后 的 效果 


2. 使 用 修复 画笔 工具 修复 瑕 疝 

修复 画笔 工具 主要 是 利用 图 像 取 样 来 绘画 ， 并 将 样本 的 纹理 光照 、 透 明度 和 阴影 等 与 
所 修复 的 像素 匹配 ， 从 而 去 除 照片 中 的 污点 和 划 痕 。 其 具体 操作 方法 如 下 : 使 用 Photoshop 
CS6 软件 打开 素材 文件 “ 黑 点 盘子 jpg”"， 选 择 “ 修 复 面 笔 工具 ”图 ， 按 住 Alt 键 在 污点 周 
围 单 击 进行 取样 ， 如 图 3-47 所 示 ， 松 开 鼠 标 ， 在 有 污点 处 涂抹 。 效 果 图 如 图 3-48 所 示 。 


图 3-47 素材 文件 图 3-48 ”修复 后 效果 图 


3. 使 用 修补 工具 修复 商品 瑕 冶 

修补 工具 是 使 用 最 频繁 的 修复 工具 之 一 ， 其 工作 原理 与 修复 工具 相同 。 图 3-49 所 示 
即 带 有 瑕 疣 的 商品 图 使 用 修补 工具 修复 前 后 的 对 比 图 , 修补 后 的 商品 已 经 完全 看 不 出 痕迹 。 
其 修复 的 具体 方法 如 下 。 

人 GE39》 使 用 Photoshop CS6 软件 打开 素材 文件 “ 脏 脏 包 png”"， 如 图 3-50 所 示 ， 红 
框 内 即 为 要 消除 的 污渍 。 

EE 选择 “修补 工具 ” 国 , 按 住 鼠 标 左 键 并 在 污渍 上 面 绘制 选区 ,如 图 3-51 所 示 。 

将 鼠标 放置 在 选 框 区 域 ， 按 住 鼠 标 左 键 并 拖 动 选区 ， 如 图 3-52 所 示 。 松 开 
鼠标 即 可 完成 商品 瑕 六 修复 ， 效 果 图 如 图 3-49 (b ) 所 示 。 
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响 咒 


(a) 修复 前 (b) 修复 后 


图 3-49 ”商品 图 修复 前 后 对 比 


hd 


图 3-50 ”素材 图 片 图 3-51 ” 框 选 瑕 竟 部 分 图 3-52 ” 拖 动 选区 


4. 仿制 图 章 工具 修复 商品 瑕 冶 

仿制 图 章 工具 可 以 从 图 像 中 复制 信息 ， 将 其 应 用 到 其 他 区 域 或 其 他 图 像 中 。 以 图 3-53 
所 示 带 有 污点 的 花瓶 图 片 为 例 ,通过 仿制 图 章 工具 将 污点 部 分 修复 ,效果 图 如 图 3-54 所 示 。 
具体 操作 如 下 。 


图 3-53 ”素材 图 片 图 3-54” 惠 竟 修 补 完 效果 图 
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6 而 3》 使 用 Photoshop CS6 软件 打开 素材 文件 “ 脏 脏 的 花瓶 jpg"， 如 图 3-55 所 示 ， 
红 框 内 即 为 要 消除 的 瑕 病 部 分 。 

EE 选择 “仿制 图 章 工具 ” 辆 ， 将 鼠标 放置 在 花瓶 中 污点 右 侧 ， 按 住 Alt 键 ， 
当 光 标 变 为 圆 形 十 字 图 标 时 ( 如 图 3-56 所 示 ) 单 击 进行 取样 。 然 后 松 开 Alt 键 在 瑕 症 处 涂 
抹 ， 反 复 重 复 此 操作 ， 效 果 图 如 图 3-54 所 示 。 


图 3-55 ” 带 瑕 意 的 商品 图 图 3-56 取样 


3.3.2 ”使 图 片 中 的 商品 更 突出 


拍摄 商品 图 片 时 会 带 有 一 个 背景 ,但 这 些 背 景 可 能 会 使 商品 不 够 突出 ， 这 时 即 可 使 
用 模糊 工具 弱化 背景 ， 或 使 用 锐 化 工具 突出 主体 的 方法 ， 使 图 片 中 要 表达 的 商品 更 清晰 更 


突出 。 


1. 使 用 模糊 工具 弱化 背景 


模糊 工具 是 通过 降低 图 像 中 相 邻 像素 之 间 的 对 比 度 ， 从 而 使 图 像 产 生 模 糊 的 效果 ， 
图 3-57 所 示 即 一 款 茶叶 的 商品 图 经 过 模糊 处 理 前 后 的 对 比 图 。 通 过 对 比 图 可 以 看 出 ， 经 
过 模糊 的 商品 图 片 主 次 关系 更 明显 。 其 具体 操作 方法 如 下 


(a) 模糊 处 (b) 模糊 处 理 后 
图 3-57 商品 图 片 模糊 前 后 的 对 比 


067 


RRR NN NN 


全 站 关 工 设计 实 操 , 配色 、 布 局 、 修 图 、 装 修 


ED 使 用 Photoshop CS6 软件 打开 素材 文件 
“ 茶 png”， 如 图 3-57 (a ) 所 示 。 

GE 选择 “模糊 工具 ” 国 ， 在 选项 栏 设 置 “ 笔 
刷 大 小 ”为 200“ 硬 度 ” 为 0“ 强度 ”为 50% ,在 如 图 3-58 
所 示 的 红 框 内 对 需 en 使 商品 主体 
更 加 突出 ， 模 糊 后 的 效果 如 图 3-37 (b ) 所 示 。 


2. 使 用 锐 化 工具 突出 商品 
锐 化 工具 的 作用 正好 与 模糊 工具 相反 ， 它 能 使 模糊 


的 图 片 变 清晰 ， 常 用 于 增强 商品 的 细节 ,但 并 不 是 进行 
模糊 操作 的 图 像 再 经 过 锐 化 处 理 就 能 恢复 到 原始 状态 


我 们 继续 用 图 片 “ 茶 ”举例 ， 如 图 3-59 所 示 的 即 为 锐 化 前 


图 3-58 ”需要 弱化 


后 的 对 比 图 


(a) 锐 化 前 (b) 锐 化 后 


图 3-59” 锐 化 前 后 对 比 图 


3.4 ”商品 图 片 的 特殊 处 理 


商品 图 片 不 仅 要 进行 简单 的 色调 调整 ,还 需要 通过 对 图 片 进行 特殊 处 理 使 其 更 加 美观 。 
常见 的 商品 图 片 特殊 处 理 方法 包括 图 层 混 合 模式 、 图 层 样式 和 滤 镜 ， 本 节 将 对 这 些 设置 方 


法 进行 介绍 。 


3.4.1 ”使 用 擦 除法 拼合 图 片 


在 制作 商品 主 图 或 者 设计 轮 播 图 时 ， 一 张 图 片 很 难 满足 设计 需求 ， 往 往 需要 几 张 素材 
图 片 拼 合 而 成 ， 这 时 就 需要 使 用 控 除 工具 将 素材 融合 。 如 图 3-60 所 示 的 海报 ， | 


是 运用 擦 除 的 方法 将 多 张 图 片 拼合 而 成 的 效果 。 下 面 将 


日 不 同 示 例 对 “橡皮 擦 工具 ” 


景 橡皮 擦 工具 ”和 “魔术 橡皮 擦 工具 ”进行 介绍 。 
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图 3-60 ”图 片 拼接 的 海报 


1. 使 用 橡皮 擦 工具 使 素材 拼合 


橡皮 擦 工具 主要 用 来 擦 除 图 像 ， 以 图 3-61 所 示 的 戴 耳 机 狗 狗 图 片 为 例 ， 耳 机 和 狗 狗 
没有 融 在 一 起 ， 此 时 需要 用 橡皮 擦 工具 擦 除 耳 机 的 多 余部 分 。 其 操作 方法 如 下 : 选择 “ 橡 
皮 擦 工具 ”图 ， 在 选项 栏 设 置 笔 刷 的 大 小 及 形状 ， 在 图 像 中 拖 忠 鼠标 进行 擦 除 ， 效 果 图 
如 图 3-62 所 示 。 


图 3-61 狗 狗 和 耳机 图 3-62 ”效果 图 


2. 使 用 背景 橡皮 擦 工具 使 素材 和 背景 拼合 


背景 橡皮 擦 工具 的 操作 方法 与 橡皮 擦 工具 的 操作 方法 类 似 ,但 背景 橡皮 擦 是 一 种 智能 
橡皮 擦 ， 它 可 以 自动 采集 面 笔 中 心 的 色 样 ， 同 时 删除 在 画笔 内 出 现 的 这 种 颜色 ， 使 擦 除 区 
域 变 成 透明 区 域 。 简 单 地 说 背景 橡皮 擦 工具 可 以 将 图 像 背 景 擦 至 透明 色 ， 并 可 用 于 擦 掉 指 
定 颜 色 。 

以 图 3-63 所 示 的 插花 瓶 图 片 为 例 ， 在 Photoshop CS6 中 选择 “背景 橡皮 擦 工 具 ” 国 ]， 
在 选项 栏 中 设置 “ 笔 刷 大 小 ”为 175 像素 “ 笔 刷 硬度 ”为 0%、“ 限 制 ” 选 择 为 不 连续 、“ 容 
差 ” 为 30%, 在 背景 上 按 住 鼠 标 左 键 进行 拖 忠 ,插花 瓶 的 背景 即 擦 除 完成 ,效果 图 如 图 3-64 
所 示 。 
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图 3-63” 擦 除 前 图 3-64” 擦 出 后 


3. 使 用 魔术 橡皮 擦 工具 使 素材 和 背景 拼合 

魔术 橡皮 探 工 具 可 以 自动 分 析 图 像 的 边缘 ,根据 像素 颜色 擦 除 图 像 。 用 魔术 橡皮 擦 工 
具 在 图 像 中 需要 擦 除 的 任 一 区 域 单 击 ， 所 有 相似 的 颜色 区 域 将 会 被 擦 除 并 变 成 透明 区 域 。 
以 图 3-65 所 示 的 图 片 为 例 , 在 Photoshop CS6 中 选择 “魔术 橡皮 擦 工具 ” 国 , 设 置 “ 容 差 ” 
为 32， 勾 选 “ 连 续 "， 在 背景 上 单 击 ， 则 控 除 背景 ， 效 果 如 图 3-66 所 示 。 


图 3-65 ” 擦 除 前 图 3-66 ” 擦 除 后 


3.4.2 ”使 用 图 层 混合 模式 拼合 图 片 


图 层 混合 模式 决定 了 当前 图 层 的 图 像 与 其 下 面 图 层 的 图 像 以 何 种 模式 进行 混合 。 它 是 
Photoshop 中 最 核心 的 功能 之 一 ， 也 是 在 图 像 处 理 中 最 为 常用 的 一 种 技术 手段 。 

以 如 图 3-67 的 水 杯 素材 和 小 老鼠 素材 为 例 ， 如 果 想 要 两 个 素材 衔接 融合 得 当 ， 则 
需要 使 用 混合 模式 中 的 “正片 琶 底 ”效果 。 操 作 方 法 如 下 : 在 Photoshop CS6 软件 中 打 
开 素材 文件 “保温 杯 jpg"， 再 将 “小 老鼠 jpg” 置 和 其 中 并 调整 大 小 ， 单 击 图 层 上 方 的 


本 到 二 二 天 护 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “正片 生 底 ”选项 。 进 行 正片 释 底 操作 后 的 效 
果 如 图 3-68 所 示 。 
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图 3-67 ” 便 用 正片 县 底 模 式 前 图 3-68 ”使 用 正片 合 底 模式 后 


3.4.3 ”添加 图 层 样式 美化 商品 图 片 


图 层 样式 可 以 为 图 层 中 的 图 像 内 容 添加 投影 、 发 光 、 浮 雕 、 描 边 等 效果 ， 创 建 具有 真 
实质 感 的 特效 ， 兼 具 非常 强 的 灵活 性 。 下 面 将 通过 一 个 示例 来 介绍 如 何 用 图 层 样式 美化 图 
片 。 在 Photoshop CS6 软件 中 打开 素材 文件 “行李 箱 海报 psd"， 选 中 文本 图 层 ， 单 击 图 层 
下 方 的 “图 层 样式 ”按钮 茵 ,在 打开 的 下 拉 列 表 中 选择 一 种 图 层 样式 即 可 打开 “图 层 样式 ” 


对 话 框 ， 如 图 3-69 所 示 。 


图 3-70 和 图 3-71 所 示 即 为 使 用 图 层 样 式 前 后 的 对 比 。 


内 发 光 
结构 


混合 模式 (6): 小 色 - 有 
不 遂 明 度 0 一 7 一 天  % 新 建 样式 (W)… 
杂 色 NG 一 0 % 团 祯 点 (V) 


oD oS 
= 村 


: 和 
源 :日 居中 四。 回 边 具 (6) 

RE 一 一 

大 小 SG 0 像素 
万 吴 

ss is 

区 国 R: 一 50 % 

i 


图 3-69 ”图 居 样 式 面板 
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, 中 


图 3-71 使 用 图 居 样 式 前 


下 面 对 “ 图 层 样 式 ” 对 话 框 中 的 常见 的 应 用 效果 进行 介绍 : 

。 斜面 和 浮雕 :“ 和 斜面 和 浮雕 ”效果 可 以 对 图 层 添 加 高 光 与 阴 影 等 各 种 组 合 ， 使 图 层 
内 容 呈 现 立 体 的 浮雕 效果 。 在 处 理 图 片 中 ， 该 选项 常用 于 文字 的 美化 操作 。 

。 描 边 :“ 描 边 ”效果 可 以 使 用 颜色 、 渐 变 或 图 案 描画 对 象 的 轮廓 。 在 处 理 图 片 时 ， 该 
选项 常用 于 硬 边 的 形状 和 文字 的 处 理 。 

。 内 阴影 :“ 内 阴影 ”效果 可 以 在 紧 靠 图 层 内 容 的 边缘 内 侧 添 加 阴影 ， 使 图 层 的 图 像 
产生 四 陷 的 效果 。 在 处 理 图 片 时 ， 该 选项 常用 于 图 片 内 元 素 的 深度 处 理 ， 让 图 片 看 
起 来 更 有 层次 。 

。 外 发 光 与 内 发 光 :“ 外 发 光 ” 主 要 指 沿 着 图 像 的 边缘 向 外 产生 发 光 效果 ;“ 内 发 光 ” 
主要 指 沿 着 图 像 的 边缘 向 内 产生 发 光 效果 。 

。 光 泽 :“ 光 泽 ” 效 果 可 以 为 图 形 对 象 添加 光泽 ， 在 处 理 图 片 时 ， 该 选项 常用 于 创建 
金属 表面 的 光泽 度 或 者 美化 文字 的 外 观 。 

。 颜 色 、 渐 变 、 图 案 生 加 :“ 颜 色 释 加 ”效果 可 以 在 图 形 对 象 上 益 加 指定 的 颜色 ， 通 
过 设置 颜色 的 混合 模式 和 不 透明 度 控制 琶 加 效果 。 渐 变 琶 加 和 图 案 倒 加 的 目的 与 颜 
色 二 加 相同 ， 只 是 最 后 的 效果 不 同 。 

。 投影: “投影 ”效果 是 在 图 形 对 象 背 后 添加 阴影 ， 使 其 产生 立体 感 。 在 处 理 图 片 时 ， 
该 图 层 样式 常常 使 用 ， 可 以 增加 图 片 的 层次 感 ， 效 果 比 较 自 然 。 
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如 | 


3.4.4” 滤 镜 在 美化 商品 图 片 中 的 应 用 


滤 镜 主要 是 用 来 实现 图 像 的 各 种 特殊 效果 。 在 处 理 商 品 图 片 时 ， 滤 镜 是 常用 的 工具 ， 
它 可 以 使 商品 图 片 更 加 直观 、 醒 目 ， 从 而 吸引 消费 者 。Photoshop 中 提供 了 多 种 滤 镜 效果 ， 
下 面 用 不 同 示例 介绍 几 种 常用 的 滤 镜 添加 方法 。 


1. 使 用 液化 滤 镜 调整 商品 图 片 

液化 滤 镜 效果 可 以 对 图 像 的 任何 部 分 进行 变形 处 理 ， 包 括 收缩 、 膨 胀 或 旋转 。 例 如 ， 
对 商品 图 片 中 的 模特 身材 进行 修饰 时 即 可 使 用 该 工具 。 图 像 液化 处 理 的 具体 操作 方法 如 
下 : 使 用 Photoshop CS6 软件 打开 素材 文件 “ 女 模特 jpg"， 选 择 “ 滤 镜 ”一 “液化 ”命令 
或 按 Ctrl+ShiftrX 组 合 键 调 出 该 命令 面板 ， 在 弹出 的 对 话 框 中 设置 相关 参数 ， 如 图 3-72 所 
示 。 设 置 参数 后 即 可 在 左 侧 画 布 中 进行 拖 虹 变形， 变形 前 后 的 对 比如 图 3-73 所 示 。 


En 
CT TEN 
mo 


ESTETZYYITSE] 


图 3-72 ”液化 操作 面板 


(a) 液化 前 (b) 液化 后 
图 3-73 ”液化 效果 前 后 对 比 
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2. 使 用 模糊 处 理 商 品 图 片 

滤 镜 中 的 “模糊 ”的 原理 和 “模糊 工具 ”大 体 相似 ， 只 不 过 滤 镜 中 的 模糊 可 以 将 模糊 
的 区 域 、 力 度 设置 得 更 为 准确 。 同 时 ， 在 滤 镜 中 的 模糊 效果 分 类 更 多 ， 常 见 的 模糊 有 “高 
斯 模糊 ”“ 动 感 模糊 ”“ 径 向 模糊 ”等 。 选 择 菜单 栏 中 的 “ 滤 镜 ”一 “模糊 ”命令 ， 打 开 如 
图 3-74 所 示 的 “模糊 ”菜单 ， 从 中 选取 相应 的 模糊 滤 镜 。 图 3-75 ~ 图 3-77 分 别 为 “高 斯 
模糊 ” “动感 模糊 ”“ 径 向 模糊 ”的 效果 图 。 


Shift+Ctrl+A 
Shift+ Ctrl+R 
Shift+Ctrl+X 


Alt+Ctrl+V 


图 3-74 ”菜单 栏 中 的 所 有 模糊 效果 图 3-75 ”高 斯 模糊 


图 3-76 动感 模糊 图 3-77 ” 径 向 模糊 


3. 使 用 锐 化 滤 镜 优化 商品 图 片 

滤 镜 中 “ 锐 化 ”的 原理 和 “ 锐 化 工具 ”大 体 相似 ， 只 不 过 滤 镜 中 的 锐 化 只 能 针对 整个 
到 像 或 者 选区 内 图 像 整 体 调整 。 在 滤 镜 中 的 锐 化 效果 分 类 更 多 ， 常 见 的 锐 化 有 “USM 锐 
化 ”“ 进 一 步 锐 化 ”“ 锐 化 边缘 ”等 。 选 择 菜单 栏 中 的 “ 滤 镜 ”一 “ 锐 化 ”命令 ， 即 可 打开 
如 图 3-78 所 示 的 “ 锐 化 ”菜单 ， 从 中 选取 相应 的 锐 化 滤 镜 。 以 图 3-79 的 鲜花 图 片 为 例 ， 
锐 化 后 的 效果 如 图 3-80 所 示 。 
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Digimarc 


图 3-78 ”菜单 栏 中 的 所 有 锐 化 效果 图 3-79 锐 化 前 


图 3-80” 锐 化 后 


3.5 ”轻松 学 会 抠 图 换 背 景 


抠 图 主要 是 为 了 将 商品 图 片 从 拍摄 的 照片 中 抠 取 出 来 ， 可 以 更 方便 地 对 商品 图 片 进行 
进一步 处 理 。 在 Photoshop 中 ， 抠 取 商 品 图 片 的 方法 有 很 多 ， 这 些 方法 分 别 用 于 不 同形 状 
及 背景 ， 本 节 将 对 有 规则 的 图 形 的 抠 取 、 从 简单 背景 中 抠 图 、 复 杂 图 形 的 抠 取 、 毛 发 物体 
的 抠 图 等 方法 进行 逐一 介绍 。 


3.5.1 ”从 背景 中 抠 取 有 规则 的 图 形 


背景 中 抠 取 有 规则 的 图 形 时 可 以 使 用 磁性 套 索 工具 ， 该 工具 适用 于 为 图 像 边缘 与 背 
景 颜色 反差 较 大 的 图 片 建立 选区 ， 图 3-81 即 一 款 钱包 商品 图 抠 图 前 后 对 比 。 具 体操 作 方 
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法 如 下 。 


(a) 抠 取 前 (b) 抠 取 后 
图 3-81 钱包 抠 取 前 后 对 比 


E33 使 用 Photoshop CS6 软件 打开 素材 文件 “钱包 jpg” ,选择 “磁性 套 索 工具 ”" 国 I， 
在 选项 栏 设置 “频率 ”为 100， 如 图 3-82 所 示 。 


图 3-82 工具 选择 及 属性 设置 


GE 在 钱包 边缘 单 击 以 确定 一 个 起 点 ， 然 后 沿 着 钱包 边缘 拖 动 鼠 标 ， 如 图 3-83 
所 示 ， 最 终 回 到 起 点 再 次 单 击 ， 即 可 得 到 对 应 的 选区 ， 如 图 3-84 所 示 。 


图 3-83 ”和 套 素 工具 抠 图 图 3-84 选区 


人 ER 示 择 “多 边 形 套 索 工具 ”三 ， 按 住 Alt 键 ， 当 磁性 套 索 工 具 变 成 带 减 号 的 
图 标 轩 时 ， 沿 着 钱包 边缘 对 多 余 选 区 进行 减 选 ， 如 图 3-85 所 示 。 

GEZ9 拉 Ctl+J 组 合 键 对 该 选区 内 内 容 进行 复制 ， 单 击 背景 图 层 前 方 的 “隐藏 ” 按 
钮 图 如 图 3-81 (b ) 所 示 ( 透 底 图 )。 按 CtrltShift+s 组 合 键 将 其 另存 为 PNG 格式 的 文件 
至 指定 文件 夹 内 。 
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图 3-85 ”多 雇 形 套 素 工具 绘制 选区 


3.5.2 ”从 简单 背景 中 抠 图 
从 简单 背景 中 抠 图 可 以 使 用 魔 棒 工 具 和 快速 选择 工具 进行 操作 。 魔 棒 工 具 可 以 抠 出 


背景 色 单纯 、 物 体 边界 清晰 的 图 像 ， 如 纯色 背景 。 快 速 选择 工具 可 以 对 色差 较 大 的 图 片 进 
行 抠 图 ， 快 速 选 择 想 选择 的 区 。 下 面 将 以 玉 钢 商 品 图 为 例 ， 将 玉 锡 背景 制作 成 透明 色 ， 如 


图 3-86 所 示 。 


(a) 抠 取 前 (b) 抠 取 后 
图 3-86 玉 镭 抠 取 前 后 对 比 

EF 使 用 Photoshop CS6 软件 打开 素材 文件 “ 玉 锡 jpg"， 并 按 CtrlJ 组 合 键 复制 
图 层 ， 如 图 3-87 所 示 。 然 后 将 背景 图 层 隐 藏 。 

3 远 择 “ 府 标 工具 ” 国 ， 在 选项 栏 中 设置 “ 窑 差 ”为 30 EB。 

EB》 在 背景 上 单 击 裁 入 选区 ， 如 图 3-88 所 示 ， 按 住 Sh 键 ， 当 出 现 图 中 框 选区 
域 的 带 加 号 的 魔 棒 工 具 时 ， 单 击 手 镯 中 间 增 加 选区 ， 如 图 3-89 所 示 。 按 Delete 键 删除 选 
区 内 背景 。 

选择 “快速 选择 工具 ” 国 强 ， 在 手镯 的 阴影 部 分 单 击 进行 加 选 或 减 选 ( Shift 
和 Alt 切换 加 选 和 减 选 )， 如 图 3-90 所 示 ， 效 果 图 如 图 3-86 (b ) 所 示 。 
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图 3-88 ”就 入 选区 


图 3-89 增加 选区 图 3-90 添加 选区 


3.5.3 ”从 背景 中 抠 取 复杂 图 形 


从 背景 中 抠 取 复杂 图 形 可 以 使 用 路 径 抠 图 的 方式 进行 抠 图 ， 路 径 抠 图 属于 抠 图 工具 中 
的 常用 工具 ， 适 用 于 物体 边界 有 长 弧 线 的 物体 。 路 径 抠 图 是 使 用 钢笔 工具 进行 的 ， 下 面 将 
使 用 钢笔 进行 抠 图 , 将 其 换 为 更 具 中 国 风 风 格 的 背景 , 换 背 景 前 后 对 比如 图 3-91 和 图 3-92 
所 示 。 具 体操 作 如 下 。 


,4 
日 


站 本 已 牙 这 亲本 
EDEL 


信 - 汪 
是 生 
惟 征 
烛 成 
本 人 人 
相 人 
区 陪 


二 
名 全 


图 3-91 换 背景 前 图 3-92 换 背 景 后 
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ED 使 用 Photoshop CS6 软件 打开 素材 文件 “花瓶 ”， 按 Cul+J 组 合 键 复制 图 层 ， 
如 图 3-93 所 示 。 然 后 隐藏 背景 图 层 。 


图 3-93 ”素材 文件 “ 论 瓶 ” 


SEE 选择 钢笔 工具 或 者 按 P 调 出 “钢笔 工具 ” 贺 ， 将 工具 选项 栏 中 的 工具 模式 
设置 为 “路 径 "， 在 陶瓷 的 边缘 处 单 击 确定 路 径 起 点 ， 如 图 3-94 所 示 

GE 沿 着 陶瓷 的 边缘 再 次 单 击 确定 另 一 个 锚 点 ， 这 时 不 要 松 开 鼠标 ， 而 是 一 直 按 
着 直到 描绘 出 弧 线 ， 如 图 3-95 所 示 

用 Step3 的 方法 继续 沿 着 花瓶 边缘 绘制 路 径 ， 当 发 现 路 径 不 够 圆润 时 及 时 按 
Ctrl+Z 组 合 键 撤销 操作 ,车 描绘 完毕 发 现 路 径 不 够 圆润 可 以 通过 “添加 锚 点 工具 ” 国 、“ 州 
除 锚 点 工具 ” 国 和 移动 锚 点 的 方法 对 锚 点 进行 调整 ,使 其 与 花瓶 贴 合 。 最 终 绘制 整个 路 径 ， 
如 图 3-96 所 示 。 


a 

Y 
加 4 ,4 
ET a | 
| Se 2 
Po We 
图 3-94 ”设置 路 径 起 点 图 3-95 ”给 制 弧 线 图 3-96 ”绘制 选区 
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EB》 将 鼠标 放置 在 花瓶 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “建立 选区 ”选项 ， 按 
CtrltShifttI 组 合 键 对 选区 进行 反 向 选择 ,再 按 Delete 键 删除 现 有 背景 ,效果 如 图 3-97 所 示 。 


图 3-97 删除 背景 
使 用 Photoshop CS6 软件 打 开 背景 素材 文件 ， “花瓶 背景 jpg"。 将 “花瓶 ” 文 
档 中 选中 的 “背景 副本 ”图 层 放 图 到 “ 花 闫 普 tjpg” 文 件 中 ,调整 位 置 及 大 小 ， 效 果 如 
图 3-92 所 示 . 


3.5.4 ”从 背景 中 抠 取 毛发 物体 图 形 


商品 图 中 模特 发 丝 的 抠 取 是 抠 图 过 程 中 的 难点 。 而 通道 抠 图 专门 为 抠 毛 发 而 生 ， 而 且 
抠 出 来 的 发 丝 自 然 美观 。 如 图 3-98 所 示 的 模特 图 片 所 示 ， 要 求 将 模特 背景 更 换 为 纯 白 色 ， 
抠 取 人 物 且 更 换 背 景 后 该 图 片 模特 部 分 仍 保持 完整 ， 如 图 3-99 所 示 。 具 体操 作 方 法 介绍 
如 下 ， 


图 3-98 抠 图 前 图 3-99 ” 抠 图 后 
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GE3》 使 用 Photoshop CS6 软件 打开 素材 文件 “模特 jpg"， 如 图 3-98 所 示 。 复 制 


人 ES 选择 “图 像 ” 一 “计算 ”命令 ， 打 开 “ 计 算 ” 对 话 框 以 新 建 通道 ， 具 体 参数 
设置 及 效果 如 图 3-100 所 示 。 


基 115) (发 胡 二 E53 jpg 
EL): 1 
Ba 下 


本 2U (下 二 而 Jp 
ER BEL 


ET 
(ON Ej 和 % 
MS) 


直 果 (Rj， 浊 而 


图 3-100 ”新 建 通 首 

GE 切换 到 通道 面板 , 选中 “Alpha 1 副本 ”, 右 击 选择 复制 通道 ,如 图 3-101 所 示 。 

EY 按 ctltL 组 合 键 调整 通道 色 阶 ， 具体 参数 设置 及 本 
对 应 效果 如 图 3-102 所 示 

GE 按 c+M 组 合 键 调整 通道 “曲线 "， 具 体 参数 设 
置 及 对 应 效果 如 图 3-103 所 示 

BY》 按 Ctq+I 组 合 键 对 图 像 进行 反 相 操 作 ， 如 图 3-104 
所 示 。 

EES 计 插 “ 面 笔 工具 " 国 , 将 前 景色 改 为 白色 ， 在 沿 we 
着 模特 的 内 边缘 进行 涂抹 ， 根据 需要 涂抹 的 区 域 按 [ 键 缩小 笔 图 3-101 复制 衣 道 
刷 大 小 、 按 ] 键 增 大 笔 刷 大 小 ， 涂 抹 完 成 的 效果 如 图 3-105 所 示 

GE 按照 step7 的 方法 ， 沿 着 模特 外 侧 ， 将 背景 处 偏 灰白 的 区 域 涂抹 成 黑色 ， 涂 
抹 后 的 效果 图 如 图 3-106 所 示 

GE》 将 鼠标 放置 在 复制 的 通道 上 ， 按 住 Ctrl 键 ， 当 鼠标 箭头 变 为 如 图 3-107 所 示 
的 图 标 时 单 击 ， 载 和 人 选区， 如 图 3-108 所 示 。 

GD》 寺中 “RGB” 通 道 ， 然 后 切换 到 图 层面 板 ， 按 Ctrl+ShifttI 组 合 键 对 选区 进 
行 反 向 选择 ， 按 Delete 键 删除 ， 如 图 3-109 所 示 。 按 CtrltD 组 合 键 取消 选择 。 

在 “图 层 1” 下 方 新 建 图 层 , 并 将 其 填充 为 白色 , 最 终 效果 图 如 图 3-99 所 示 。 


Alpha 1 
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网 
游 
KS 


El 


| 二 | 
AZ 2 
本 | i) 
ee 


图 3-102 调整 色 阶 


图 3-103 ”曲线 调整 


图 3-104 图像 反 相 图 3-105 “涂抹 模特 部 分 图 3-106 涂抹 背 早 部 分 
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Alpha 1 
9 人 1 副本 


图 3-107 载 入 选区 图 3-108 ” 载 入 选区 效果 图 3-109 删除 背景 


3.6 ”为 商品 图 片 添 加 文字 


文字 作为 商品 图 片 的 重点 ， 不 但 能 传递 产品 信息 ， 还 能 促进 消费 ， 可 读 性 强 、 搭 配合 
理 的 文本 能 直观 地 向 买 家 倾诉 商品 的 详细 信息 ， 因 此 文本 也 是 店铺 装修 需要 设计 的 重要 元 
素 。 本 节 将 对 文字 工具 的 相关 知识 进行 讲解 


3.6.1 ”添加 多 种 文字 效果 


1. 添加 横 排 文字 

横 排 是 最 常见 的 文字 排列 方式 ， 网 店 中 常用 于 店 招 、 海 报 以 及 主页 中 横 排 文字 不 但 大 
气 美观 ， 还 能 更 直观 地 表现 文字 内 容 。 横 排 文字 的 添加 方法 如 下 

(GE39》 使 用 Photoshop CS6 软件 打开 素材 文件 “大 红 樱桃 psd"， 如 图 3-110 所 示 ， 


图 3-110 ”素材 文件 
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人 ES 选择 “ 横 排 文字 工具 ” 苹 ， 选 择 “ 窗 口 ” 一 “字符 ”命令 ， 在 “字符 ” 面 
板 中 设置 参数 ， 具 体 参数 设置 如 图 3-111 所 示 。 


图 3-111 设置 参数 


GE 在 图 中 输入 “香甜 ”文本 ， 按 Ctrl+Enter 组 合 键 结束 文 本 输入 ， 将 其 放置 在 
合适 位 置 。 按 此 方法 再 分 别 输入 “ ”和 “樱桃 "， 摆 放 位 置 如 图 3-112 所 示 。 


< 


oe 香甜 :楼 桃 


图 3-112 输入 文字 


SSYZ9》 人 选中 “樱桃 ”图 层 ， 单 击 “字符 ”面板 中 的 “加 粗 ” 按 钮 图 对 字体 进行 加 粗 
处 理 ， 效 果 如 图 3-113 所 示 。 


是 < 


Rp 香甜 樱桃 


图 3-113 ”设置 字体 样式 


ES 按照 step2 ~ Step3 的 方法 输入 相关 文本 。 字 体 、 颜 色 、 大 小 及 摆 放 位 置 如 
图 3-114 所 示 。 
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图 3-114 效果 图 


2. 添加 竖 排 文字 

竖 排 也 是 较 常见 的 文字 排列 手法 ， 常 用 于 较 突出 的 区 域 。 通 过 竖 排 文字 可 以 将 横 排 的 
内 容 进行 简单 的 区 分 ， 突 出 重点 。 坚 排 文 字 的 操作 方法 和 横 排 文字 相同 ， 图 3-115 所 示 为 
坚 排 文 字 的 效果 。 


~ 


图 3-115 ” 竖 排 文字 效果 


3. 添加 蒙 版 文字 
蒙 版 文字 在 网 店 中 主要 为 了 突出 文字 ， 图 3-116 所 示 图 片 中 的 “味道 ”两 个 字 即 添加 
了 蒙 版 文字 效果 。 添 加 蒙 版 文字 的 具体 方法 介绍 如 下 。 


Cy 
” 


六 2 
< 
AS ”aa A 


满 99 减 10 满 199 减 30 满 299 减 50 


图 3-116 ”添加 莹 版 文字 效果 
GE》 使 用 Photoshop CS6 软件 打开 素材 文件 “舌尖 上 的 味道 jpg”, 如 图 3-117 所 示 。 
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D4 Dy 
Ee- ~ 
SS ) 
y ba [i ~ 
TS 
| 四 
. se- 
mn 六 入 风口 “要 李 二 六。 内 香 四 共 
Te 满 99 减 10 满 199 减 30 满 299 减 50 


图 3-117 舌尖 上 的 味道 
3-118 所 示 , 并 调整 文本 位 置 。 


人 GE 在 图 像 上 单 击 输入 “味道 ", 设置 文本 参数 如 图 


图 3-118 ”文本 参数 面板 


GE》 将 素材 文件 “ 蒙 版 图 片 jpg” 拖 中 至 画布 中 , 按 Enter 键 确认 置 入 , 如 图 3-119 


所 示 。 
3 


站 六 
ee 
) 减 30 清 299 总 50 


图 3-119 置 入 图 片 


人 GE 选中 “ 荣 版 图 片 ” 图 层 , 按 Ctrl+Alt+G 组 合 键 为 “ 蒙 版 图 片 ”创建 剪 切 蒙 版 ， 
如 图 3-120 所 示 。 调 大 小 及 位 置 以 更 好 地 实现 文本 的 展示 效果 。 最 终 效 果 图 如 图 3-116 所 示 。 


图 3-120 创建 剪 切 蒙 版 整 
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4. 路 径 文 字 

路 径 文字 指 绘制 路 径 后 ， 沿 着 路 径 输 入 的 文字 。 网 店 详情 页 中 常 使 用 路 径 文字 来 描述 
细节 图 片 ， 如 图 3-121 所 示 。 该 表现 形式 能 以 图 文 结合 的 形式 丰富 画面 ,使 画面 更 加 美观 。 
路 径 文字 的 添加 方法 如 下 。 

ES》 使 用 Photoshop CS6 软件 打开 素材 文件 “路 径 文字 素材 psd” ,如 图 3-122 所 示 。 


图 3-121 详情 页 中 的 路 径 文 字 图 3-122 路径 文字 素材 


ES 选择 “ 梢 圆 工具 ” 国 , 在 选项 栏 设置 “填充 ”为 无 “ 描 边 颜色 ”为 黑色 “ 描 
边 粗 细 ” 为 1 像素 。 按 住 Shift 键 绘制 两 个 正 圆 ， 如 图 3-123 所 示 。 

人 SEE 选中 “椭圆 1” 图 层 ， 选 择 “ 横 排 文 字 工具 ”， 并 将 鼠标 移动 到 路 径 上 ， 当 
出 现 如 图 3-124 所 示 方 框 中 的 红色 图 标 时 单 击 创建 路 径 文字 。 路 径 文字 效果 图 如 图 3-121 
所 示 。 


图 3-123” 画 正 贺 图 3-124 创建 路 径 文 字 
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图 、 装 修 


EE: 


加 自 定义 形状 路 径 文字 


Rn Ee 
除了 形状 路 径 ， 还 有 一 种 路 径 是 运用 EA 息 和 

“钢笔 工具 ”制作 的 任意 路 径 。 可 以 用 “ 文 d 下 i 所 

字 工 具 ” 在 任意 路 径 上 输入 想 显示 的 内 容 ， 其 和 和 

效果 图 如 图 3-125 所 示 。 和 入 和 
后 
有 
< 


图 3-125 ” 自 定 义 路 径 文 字 
5. 段落 文字 


选择 “文字 工具 ”以 后 ， 在 图 像 上 画 出 文本 框 ， 在 文本 框 中 输入 的 文本 ， 就 是 段落 文 
本 。 段 落 文本 适用 于 详情 页 中 长 文本 的 输入 。 其 参数 调整 主要 是 通过 “字符 ”面板 或 “ 段 
落 ” 面 板 进行 ， 如 图 3-126 ~ 图 3-128 所 示 。 


图 3-126 ”字符 面板 


图 3-128 ”段落 文本 展示 
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3.6.2 ”文字 的 变形 


为 了 使 广告 更 吸引 人 ,可 将 某 些 文字 进行 变形 处 理 。 可 以 使 用 变形 工具 变形 .路 径 变形 、 
文字 变换 等 方式 ,如 图 3-129 ~ 图 3-131 所 示 。 其 中 不 同 的 变形 效果 由 不 同 的 变形 工具 实现 ， 
具体 介绍 如 下 。 


越 羔 越过 瘾 爽 爆 味 荤 


NONGJIATECHAN MANKANG GANJING HAIBAOSHEIL 


全 加 四 @9@ 


图 3-131 使 用 “文字 变换 ”文字 变形 效果 


1. “变形 工具 ”按钮 
3》 使 用 Photoshop CS6 软件 打开 素材 文件 “零食 大 促销 psd”, 如 图 3-132 所 示 。 
EE 选中 “零食 大 促销 ” 文本 图 层 ,选择 “文字 工具 ” ,在 选项 栏 中 单 击 “ 文 字 变 换 ” 
按钮 国 . 在 弹出 的 “变形 文字 ”对 话 框 内 设置 相关 参数 ， 如 图 3-133 所 示 。 调 整 文本 位 置 
变形 的 效果 如 图 3-129 所 示 。 
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< 


忆 


sr 1 MILKE 导 


样式 (5): 口上 - 
加 水 平 (H) 局 委 直 (V) 


图 3-133 ”参数 设置 


2. 使 用 路 径 变形 文字 
3》 使 用 Photoshop CS6 软件 打开 素材 文件 “ 泡 椒 凤 爪 海报 psd” ,如 图 3-134 所 示 。 


FE 
< 沁 巾 凤 扑 


. 越 辣 越过 瘾 爽 爆 味 昔 


eeeeee@ 
bi 


eve gp 


图 3-134 ”素材 文件 


ES 在 “ 泡 椒 凤 爪 "文本 图 层 上 右 击 ,在 弹出 的 快捷 菜单 中 选择 “转化 为 形状 "选项 ， 
要 转换 为 形状 的 文字 如 图 3-135 所 示 。 


- 电 概 风 败 


图 3-135 ”转化 为 形状 


090 


第 3 章 | 商品 图 片 的 修复 与 修饰 


ER》 示 择 “路 径 选 择 工具 ” 国 ， 在 形状 上 选中 需要 进行 变形 的 区 域 ， 如 图 3-136 
所 示 。 再 选择 “钢笔 工具 ” 国 轩 烛 行 添 加 错 点 、 删 除 锚 点 等 操作 。 


旦 概 风 败 


图 3-136 ”路径 选择 工具 


人 GE 选择 “直接 选择 工具 ” 辆 ， 选 中 钳 点 进行 移动 或 删除 。 此 时 要 注意 ， 选 中 
的 锚 点 是 实心 的 ， 未 选中 的 锚 点 是 空心 的 ， 如 图 3-137 所 示 。 最 终 效果 如 图 3-138 所 示 。 
_ 


Ww 直接 选择 工具 未 选中 


娃 灌 闸 上 H 谅 峙 苯 下 


图 3-137 ”选中 和 未 选中 样式 


越 辣 越 过 瘾 爽 爆 味蕾 


NONGIIATECHAN HANKANG GANJING HAIBAOSIIEIT 


BPOoP 


图 3-138 ” 泡 椒 凤 幢 海报 最 终 效果 图 


3. 变换 文字 
图 片 变 换 的 方法 对 文字 变换 同样 适用 ,但 变形 前 要 将 文字 进行 栅 格 化 ， 其 原理 和 变换 
图 片 相同 。 
人 GE》 使 用 Photoshop CS6 软件 打开 素材 文件 “ 香 浓 咖啡 豆 psd”, 如 图 3-139 所 示 。 
EY 选择 “ 咖 ” 文 本 图 层 , 右 击 , 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 化 文字 ”选项 ， 
按 CtrlHT 组 合 键 变换 图 层 ， 如 图 3-140 所 示 。 
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图 3-139 素材 文件 


秋 滑 [加 啡 襄 


图 3-140 ”变换 图 居 


右 击 ， 在 弹出 的 快捷 菜单 中 选择 “变形 ”选项 ， 拖 中 控制 点 即 可 进行 操作 ， 
如 图 3-141 所 示 。 


图 3-141 ”变形 操作 


人 SEE 对 “ 啡 ”文本 图 层 进行 相同 操作 ， 最 终 效果 如 图 3-142 所 示 。 


We 
咕 豆 “ 


图 3-142 ”变形 后 效果 


092 


第 3 章 | 商品 图 片 的 修复 与 修饰 


3.7 本 章 小 结 


本 章 主要 介绍 了 商品 图 片 的 修复 与 修饰 ， 包 括 商 品 图 片 的 多 样 裁剪 、 调 整 商品 图 片 的 
色调 、 美 化 精 修 图 片 、 商 品 图 片 的 特殊 处 理 、 轻 松 学 会 抠 图 换 背景 以 及 为 商品 图 片 添加 文 
字 等 知识 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 掌握 裁剪 商品 图 片 的 常用 方法 ， 商 品 图 片 美化 的 基本 
方法 ， 以 及 如 何 为 商品 图 片 添加 文字 。 
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学 习 目标 

知识 目标 |。 认识 切片 及 切片 的 作用 

。 了解 空间 的 作用 及 使 用 方法 
。 掌握 切片 工具 的 使 用 方法 

。 熟悉 标尺 和 辅助 线 的 使 用 方法 


技能 目标 


商品 详情 页 通常 是 在 Photoshop 中 制作 一 张 完整 的 图 片 ， 但 如 果 将 整 张 详情 图 上 传 将 会 影响 
网 页 加 载 速度 ， 降 低 用 户 体验 满意 度 。 这 时 就 需要 将 完整 的 图 片 切割 成 不 同 板块 进行 保存 和 上 传 。 
然而 该 如 何 切 分 和 管理 商品 图 片 呢 ? 本 章 将 对 商品 图 片 的 切片 和 管理 技巧 做 具体 讲解 。 
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4.1 ”图片 的 切片 与 优化 


由 于 网 络 加 载 受到 网 速 的 限制 ， 所 以 在 图 片上 传 到 网 络 之 前 都 要 切片 处 理 ， 能 够 快速 
切 图 并 合理 优化 商品 图 片 ， 是 网 店 美工 的 基础 技能 。 本 节 将 在 认识 图 片 切片 、 制 作 图 片 切 
片 、 图 片 切片 的 优化 与 保存 等 方面 对 图 片 切片 进行 介绍 。 


4.1.1 ”认识 图 片 切 片 


图 片 切片 指 的 是 将 一 张大 图 分 隔 为 若干 小 图 的 过 程 ， 通 常 使 用 Photoshop 中 的 “切片 
工具 ”来 完成 。 


1. 切 片 的 作用 


网 页 切片 在 店铺 装修 中 起 到 非常 重要 的 作用 ， 具 体 表现 在 以 下 几 个 方面 。 

*。 浏览 店铺 时 ， 图 片 的 大 小 对 页 面 整体 的 影响 非常 大 ， 将 一 张大 图 分 割 成 多 张 小 图 ， 
可 以 加 快 页 面 图 片 的 打开 速度 ， 改 善 买 家 的 体验 度 ; 

。 进行 店铺 装修 时 ， 方 便 替 换 单一 商品 ; 

。 对 大 图 进行 切片 后 ， 方 便 对 首页 与 详情 页 中 的 商品 进行 链接 。 


2. 认识 标尺 、 辅 助 线 


在 Photoshop CS6 中 创建 切片 时 ， 通 过 标尺 、 辅 助 线 可 以 精确 测量 或 定位 图 像 ， 使 切 
片 更 精准 ， 从 而 提高 工作 效率 及 质量 。 

。 标 尺 : 选择 “视图 ”一 “标尺 ”命令 ， 或 按 Ctrl+R 组 合 键 ， 即 可 在 打开 的 素材 文件 

左 侧 和 顶部 显示 或 隐藏 标尺 。 

。 参考 线 : 参考 线 是 浮动 在 图 像 上 方 的 直线 ， 分 为 水 平 参考 线 和 垂直 参考 线 。 参 考 线 

主要 用 于 给 设计 者 提供 参考 位 置 , 不 会 被 打印 出 来 。 参 考 线 是 切片 常用 的 辅助 工具 。 

在 菜单 中 ， 选 择 “视图 ”一 “新 建 参考 线 ” 命 令 ， 可 在 弹出 的 “新 建 参考 线 ” 面 板 

中 创建 精确 位 置 的 参考 线 ; 将 光标 置 于 窗口 顶部 或 左 侧 标尺 处 ， 按 住 鼠 标 不 放 并 向 

图 像 区 域 拖 动 ， 可 根据 图 像 快 速 创建 参考 线 。 创 建 参 考 线 后 ， 按 Ctrl+; 组 合 键 可 隐 

藏 或 显示 参考 线 ， 如 图 4-1 所 示 。 

在 图 4-1 中 可 看 到 上 端 与 左 端 为 标尺 ， 中 间 的 绿色 线条 为 创建 的 参考 线 ， 通 过 参考 线 
可 以 很 精确 地 看 出 店 招 的 显示 区 域 、 主 页 面 的 显示 区 域 、 背 景 的 显示 区 域 。 
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喜欢 上 陈 年 干 酥 雪糕 “ 基 : 
一 都 从 钟 苗 高 开始 一 


名 。 钟 巷 高 . 慢 慢 品 的 雪糕 


图 4-1 参考 线 效 果 


3. 切片 的 使 用 技巧 
对 图 片 进行 切片 时 ， 为 了 保证 切片 的 合理 、 位 置 的 精准 ， 需 要 掌握 一 定 的 技巧 。 主 要 
的 几 个 技巧 如 下 
。 依 靠 参考 线 进 行 切片 : 从 标尺 上 拖 动 鼠标 ， 为 图 像 创建 切片 的 辅助 线 ， 在 切片 时 可 
以 沿 着 参考 线 拖 动 鼠 标 创 建 切片 
。 切 片 位 置 : 切片 时 不 能 将 一 个 完整 的 图 像 区域 断 开 ， 应 尽量 按 完 整 图 片 切 制 ， 避 免 
在 网 速 很 慢 时 图 片 被 断 开 ， 不 能 完整 展现 
。 切 片 存储 的 颜色 : 在 存储 切片 时 ,需要 保存 为 Web 所 用 格式 。 由 于 Web 格式 色彩 
为 网 页 安全 色 ， 而 网 页 安全 色 是 各 种 显示 器 都 可 以 无 损失 无 偏差 输出 的 色彩 集合 。 
因此 ， 在 店铺 的 配色 上 尽量 使 用 网 页 安全 色 ， 避 免 实际 商品 色彩 与 商品 的 效果 图 
不 符 。 
。 切 片 存储 的 格式 : 存储 切片 时 ， 可 单独 为 各 个 切片 设置 存储 格式 ， 切 片 存 储 的 格式 
不 同 ， 其 大 小 与 效果 也 会 有 所 不 同 。 一 般 情况 下 ， 色 彩 丰 富 、 图 像 较 大 的 切片 ， 选 
择 JPG 格式 ; 尺寸 较 小 、 色 彩 单一 和 背景 透明 的 切片 ， 选 择 GIF 或 PNG-8 格式 ; 
半 透 明 、 色 彩 较 多 的 切片 ， 选 择 PNG-24 格式 
。 保 持 图 片 完整 性 : 切 图 时 要 应 尽 可 能 保证 图 片 的 完整 性 ， 而 不 是 为 了 切 图 使 图 像 
断 开 。 


4.1.2 ”制作 图 片 切片 


在 Photoshop 中 可 以 利用 “切片 工具 ” 辆 创建 切片 ， 下 面 以 一 家 家 居 店 铺 首页 为 例 ， 
讲解 制作 图 片 切片 的 详细 方法 。 
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人 ES》 使 用 Photoshop CS6 软件 打开 素材 文件 “家 居 用 品 店铺 首页 png”。 按 Ctrl+R. 
组 合 键 调 出 标尺 。 


GE 在 要 切割 的 边缘 周围 创建 参考 线 ， 以 保证 切片 的 完整 性 ， 如 图 4-2 所 示 。 


图 4-2 创建 参考 线 


HE》 选择 “切片 工具 ” 项， 在 上 店 招 的 左上 和 角 按 住 鼠 标 不 放 沿 着 参考 线 拖 奥 ， 当 
到 右 侧 的 目标 位 置 后 释放 鼠标 左 键 ， 完 成 后 的 切片 将 以 黄色 线 框 显 示 ， 如 图 4-3 所 示 . 


ZARA HOME en 


首页 。 全 部 。 香 贡 热卖 。 卧室 用 号 。 卫浴 用 品 。 各 砷 用品 。 家 居 装 饰 。 居家 日 用 。 儿童 家 居 Campaign 


A 


图 4-3 ”对 详情 页 焦点 图 进行 切片 

《SEE 确定 切片 后 ， 若 切片 的 区 域 不 是 想 要 的 区 域 ， 可 将 鼠标 指针 移动 至 需要 修改 
的 切片 的 一 边 的 中 点 上 ， 当 鼠标 指针 变 为 “© 
形状 后 ， 按 住 鼠 标 不 放 进行 拖 氢 ， 当 拖 昌 到 适 
当 位 置 时 释放 鼠标 即 可 ， 如 图 4-4 所 示 

人 GE 在 切片 区 域 上 右 击 ， 在 弹出 的 快 | ma /campaign 
捷 菜单 中 选择 “编辑 切片 选项 ”命令 , 打开 “ 切 
片 选项 ”对 话 框 ， 在“ 名称” 文本 框 可 设置 切 ， 
片 名 称 , 这 里 输入 “家 居 用 品 店铺 首页 _ 店 招 "， 图 4-4 对 切片 区 域 进 行 调整 


出 
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在 “尺寸 ” 栏 中 可 以 查看 切片 的 尺寸 ， 单 击 “确定 ”按钮 ， 如 图 4-5 所 示 。 


XX): 0 W(W): 1222 
YY): 0 H(H): 136 


切片 背景 类 型 (1): v 背景 色 ; 口 


图 4-5 设置 切片 选项 


人 GE 对 下 方 的 banner 图 进行 裁 切 , 裁 切 完成 后 调整 切片 的 位 置 ,并 将 其 命名 为 “家 
居 用 品 店铺 首页 banner”"， 如 图 4-6 所 示 。 


百 贝 。 于 各 。 音标 基 买 。 时 到 用 部 。 卫 用 用 区。 需 果 用 部 。 大 所 驳 哺 。 导 可 时 用 。 儿 复权 计 


图 4-6， 将 banner 图 刘 行 切片 
> 使 用 “切片 工具 ” 因 ， 沿 着 参考 线 为 宝贝 分 类 栏 创 建 切片 ， 如 图 4-7 所 示 。 
三 本 BY 将 鼠标 放置 在 宝贝 分 类 栏 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “划分 切片 ” 命 
令 。 打 开 “ 划 分 切片 ”对 话 框 后， 选中 “水 平 划分 为 ”和 “垂直 划分 为 ” 复 选 框 ， 并 在 其 
下 方 的 文本 框 中 输入 “3”， 单 击 “ 确 定 ” 按 钮 ， 即 可 将 切片 的 区 域 平均 划分 为 9 份 ， 如 
图 4-8 所 示 。 
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团 水 下 为 
个 志向 切片 , 均匀 分 隔 


回 坟 (WwW) 


图 4-8 划分 切片 
人 ES 宝贝 分 类 栏 切片 完成 后 调整 切片 的 位 置 ， 并 将 其 命名 为 “布艺 店铺 首页 _ 宝 
贝 分 类 栏 ”。 
GE 按 cult; 组 合 键 隐藏 参考 线 ， 然 后 选择 “切片 选择 工具 ” 国 ， 在 工具 栏 中 
单 击 “ 隐 藏 自动 切片 ”按钮 。 隐 藏 自动 切片 的 显示 ， 查 看 切片 是 否 对 齐 ， 若 没 对 齐 ， 拖 遇 
切片 边框 线 进行 对 齐 ， 完 成 后 的 效果 如 图 4-9 所 示 。 


099 


“RRA NN NN 


人 二 关 工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


图 4-9 家 居 店 铺 首页 切片 效果 
SS 将 制作 好 的 切片 保存 为 psd 格式 ， 命 名 为 “家 居 用 品 店铺 首页 切片 psd”。 


4.1.3 ”优化 与 保存 切片 


当 切 片 完成 后 ， 即 可 对 切片 后 的 图 片 进行 优化 和 保存 ， 在 优化 时 可 对 图 片 的 颜色 、 大 
小 和 动画 等 进行 优化 ， 完 成 后 还 可 将 其 保存 为 对 应 的 格式 。 在 切片 中 常见 的 格式 包括 “ 仅 
限 图 像 ”“HTML 和 图 像 ”“ 仅 限 HTML”3 种 ， 因 为 输出 的 对 象 不 同 ， 所 以 保存 的 格式 也 

在 4.1.2 节 中 已 经 将 “家 居 店 铺 首页 png” 素 材 文件 切割 完成 ， 接 下 来 需要 对 切片 进 
行 保存 ， 具 体操 作 如 下 

而 3 使 用 Photoshop CS6 软件 打开 素材 文件 “家 居 店 铺 首页 切片 psd"。 选 择 “ 文 
件 ” 一 “存储 为 Web 所 用 格式 ”命令 ,打开 “存储 为 Web 所 用 格式 ”对 话 框 。 单 击 “ 双 联 ” 
选项 卡 标签 ， 使 效果 “原稿 ”与 “GIF” 对 比 显 示 ， 并 在 右 侧 单 击 显 按钮 ， 拖 电 图 像 调整 
显示 的 位 置 ， 如 图 4-10 所 示 。 

GE 在 图 4-10 右 侧 的 预 设 栏 中 , 单 击 “ 优 化 菜单 ”按钮 圈 , 在 下 拉 列 表 中 选择 “ 优 
化 文件 大 小 ”选项 ， 打 开 “ 优 化 文件 大 小 ”对 话 框 。 
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ED 于 | 优化 东单 
可 选择 


- 本: 区 加 


忆 散 ” {he:lom 加 
区 通明 度 A 
教 量 : 


天 ie [了 
EE ve :rE 
| 


回转 换 为 地 
和 站 :显示 器 新 色 
元 数据 ， 版 权 和 联系 信息 


图 像 大 小 


和 1226 像素 再 人 比 100 % 


| 4 0 ex J sm Ra 


动画 
处 逢 硕 - [一 次 


BD om 加 as ez :2 


da | 会 昌 


图 4-10” 双 联 显示 文件 


GE 在 “所 需 文件 大 小 ” 右 侧 的 文本 框 中 输入 72， 选 中 “自动 选择 GIF/JPEG” 
单 选 项 ， 单 击 “ 确 定 ”按钮 ， 如 图 4-11 所 示 。 

GEZ9 将 “ 预 设 ” 栏 下 方 的 “优化 的 文件 格式 ”设置 为 GIF， 并 设置 “减低 颜色 深 
度 算法 ”为 “随机 性 ",“ 颜 色 ” 设 置 为 2536， 其 他 设置 要 求 可 参考 图 4-12 所 示 数 值 。 


| 所 需 文 件 大 小 : 72 


S| 
扩散 加 


上 日 当前 设置 
回 自动 泛 反 57/7E 末 


图 4-11 


人 GE 将 “品质 ”设置 为 “两 次 立方 ( 较 锐利 如 图 


览 ” 按 钮 ， 预 览 网 


设置 优化 文件 大 涉 


页 显示 效果 。 


辐 适 明度 


无 透明度 仿 色 ”| 数量 


口交 措 


转换 为 
预览 : 显示 器 颜色 
元 数据 ;版权 和 联系 信息 


#ob: | 加 | 
| 
Yeb 千 色 : 0% [=] 

损耗 : 0 器 


图 4-12 设置 优化 样式 


4-13 所 示 。 完 成 后 单 击 “ 预 


GE》 单 击 “ 存 储 ” 按钮 ,打开 “将 优化 结果 存储 为 ”对 话 框 ,选择 文件 的 存储 位 置 ， 
并 在 “格式 ”下 列 列表 中 选择 “HTML 和 图 像 ”选项 , 单 击 “ 保 存 ” 按 钮 , 如 图 4-14 所 示 。 
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1 1228 像素 百分比 : 100 % 
并 1570 人 ] 8 gm 两 次 立方 ( 较 锐 ..， ~ 
动画 

逢 环 选 项 ,| 一 次 


图 4-13 设置 优 图 像 品 质 图 4-14 存储 文件 


在 保存 的 路 径 中 选择 images 文件 夹 ， 在 其 中 可 查看 切片 文件 以 及 “家 居 店 
铺 首页 切片 html” 网 页 。 双 击 “ 家 居 店 铺 首页 切片 .html” 网 页 ， 在 打开 的 页 面 中 可 查看 
切片 图 的 布局 样式 ， 单 击 ， 在 弹出 的 菜单 中 选择 “查看 源 ” 命 令 ， 如 图 4-15 所 示 。 打 开 
源 文件 后 即 可 查看 首页 的 代码 ， 该 代码 可 以 用 在 店铺 装修 中 ， 如 图 4-16 所 示 。 


图 4-15 打开 网 页 页 面 
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图 4-16 ”查看 网 页 源 代码 


4.2 ”网 店 图 片 管理 


装修 店铺 和 发 布 商品 时 会 使 用 大 量 的 图 片 素材 ， 图 片 空间 对 于 淘宝 来 说 是 必 不 可 少 的 
一 部 分 ， 充 分 利用 图 片 空间 可 以 提升 图 片 管理 的 效率 ， 提 高 商品 图 片 的 展示 速度 ， 改 善 消 
费 者 购物 体验 。 


4.2.1 ”认识 图 片 空间 


图 片 空间 类 似 于 淘宝 装修 的 网 络 相 册 ， 里 面 不 但 包含 店铺 装修 中 用 到 的 所 有 图 片 ， 还 
包含 了 不同 风格 的 模块 样式 。 下 面 将 对 图 片 空间 的 基础 知识 进行 介绍 。 


1. 图 片 空间 的 进入 方法 


进入 图 片 空 间 的 方法 主要 有 三 种 ， 具 体 介绍 如 下 。 

。 通 过 装修 页 面 后 台 进 入 : 登录 淘宝 店铺 账号 后 ,进入 卖家 中 心 首页 , 单 击 “ 店 铺 管理 ” 
下 方 的 “图 片 空间 ” 超 链接 ， 即 可 进入 “图 片 空间 ”页 面 。 该 方法 是 进入 图 片 空间 
的 常用 方法 。 

。 使 用 网 页 直接 进入 : 在 浏览 器 的 地 址 栏 中 输入 网 址 tu.taobao.com， 即 可 直接 进入 图 
片 空间 。 

。 使 用 干 牛 进入 : 进入 千 牛 界面 即 可 看 到 卖家 中 心 首页 , 单 击 “ 店 铺 管理 ”下 方 的 “图 
片 空间 ” 超 链 接 ， 即 可 进入 图 片 空间 页 面 ， 如 图 4-17 所 示 ， 在 其 中 可 进行 图 片 的 
上 传 操 作 。 
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EE i 种 读 ， 才 了 值 同 Ho2018 06160630， 读 有 EBP 的 店 销 。 人 
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ee 局 
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图 4-17 千 午 工作 台 界 面 


2. 图 片 空间 的 优势 
图 片 空间 与 其 他 空间 不 同 的 是 ， 图 片 空间 的 图 片 不 但 可 以 直接 复制 链接 ， 还 能 在 装修 
过 程 中 快速 进行 图 片 查找 。 使 用 淘宝 图 片 空间 的 优势 主要 有 以 下 几 点 。 
*。 管理 方便 : 淘宝 图 片 空间 相对 于 其 他 外 网 空间 , 在 功能 方面 更 全 面 , 包括 替换 、 引 用 、 
搜索 、 搬 家 和 批量 处 理 等 ， 更 方便 图 片 的 管理 。 
。 安 全 稳定 : 图 片 空间 是 属于 淘宝 官方 的 产品 ， 在 图 片 安全 性 、 稳 定性 等 方面 比较 有 
保障 。 
。 流 量 速度 快 : 在 图 片 空间 中 浏览 图 片 ， 就 像 是 在 计算 机 中 查看 桌面 文件 图 片 一 样 。 
应 用 图 片 空间 中 的 图 片 可 以 加 快 页 面 打开 的 速度 ， 这 样 不 但 提高 了 买 家 的 浏览 量 ， 
还 促进 了 销售 。 


4.2.2 ”图片 空间 的 管理 


上 传 图 片 时 , 如 果 没 有 对 图 片 的 类 别 进行 设置 , 上 传 的 图 片 会 存放 在 “默认 分 类 ”下 。 
如 果 商 品 较 多 ， 众 多 商品 图 堆积 在 一 起 ， 既 不 利于 美工 查找 ， 也 容易 出 现 少 传 或 错 传 等 
题 。 为 了 方便 区 分 不 同 的 图 片 ， 可 以 通过 “图 片 管理 ”页 面 对 图 片 进行 分 类 管理 。 管 理 图 
片 的 方法 有 很 多 种 ， 下 面 对 常 用 的 管理 方法 进行 介绍 。 


1. 图 片 空间 排序 方式 


在 图 片 空间 中 ， 排 序 的 方式 主要 为 图 标 排序 、 列 表 排序 和 自 定义 排序 。 这 3 种 排序 方 
法 中 图 标 排序 方式 显示 得 更 直观 ， 而 列表 排序 方式 可 以 看 到 更 多 的 图 片 信息 。 下 面 对 这 3 
种 排序 方式 进行 介绍 。 
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。 图 标 排序 : 图 标 排序 与 列表 排序 相 比 ， 其 展现 效果 更 直观 ， 常 用 于 制作 店铺 模板 时 
使 用 。 其 设置 方式 为 : 打开 “图 片 空间 ”首页 ， 在 该 页 面 最 右 侧 单 击 “大 图 模式 ” 
按钮 [2]， 如 图 4-18 所 示 。 即 可 将 空间 中 的 图 片 以 大 图 方式 显示 ， 方 便 图 片 查找 ， 
如 图 4-19 所 示 。 


| ext | 市 加 has | | 扩 文 伯 关 名 各 图片 名称 要 索 Q | 高 织 所 索 


目 只 显示 图 片 | 图片 类 型 全部。 v | 审核 拓 态 ， 正 常 。 v | 排序 : 时 间 + | | 下 | 豆 


大 小 是 否 引 用 更 新 时 间 


2018/03/16 08:45 


2018/03/16 08:45 


2018/03/16 08:45 


2018/03/16 08:45 


图 4-18 选择 “大 图 模式 ”按钮 


2 a c wt | Hm | | vA | Ri 
目 让 四 RT | 国 片 时 ， 全 部 v | 市: 正 开 。 ~ | 扑 F; 时 间 + | | 二 | 本 | 
入 和 EE EE peneer En 从 
想起 拒 把 
me 2 | 
| A 
[5 
2o ET 失掉 jpg 于 加 和 让 是 2jpg 


图 4-19 ”图 标 排列 


。 列 表 排列 : 列表 排列 后 的 图 片 将 逐 列 对 图 片 进行 排序 。 使 用 列表 排序 更 容易 查看 图 
片 的 类 型 、 尺 十 、 大 小 和 上 传 日 期 ， 常 用 于 删除 图 片 ， 或 是 图 片 转移 时 使 用 。 其 设 
置 方法 为 : 单 击 图 4-18 右 侧 的 “列表 模式 ”按钮 [s]， 即 可 将 空间 中 的 图 片 以 列表 
方式 展示 ,方便 查看 图 片 信息 ， 如 图 4-20 所 示 。 

。 自 定义 排列 : 自 定义 排列 与 图 标 排列 及 列表 排列 不 同 ， 它 属于 手动 排列 的 一 种 ， 使 
用 该 排列 方式 可 根据 不 同 的 需求 对 图 形 进 行 排列 。 其 设置 方法 为 : 打开 “图 片 空间 ” 
首页 ,选中 “只 显示 图 片 ” 复 选 框 ,并 单 击 其 右 侧 的 下 拉 按 钮 ,在 下 拉 列 表 中 选择 “PC 
端 "， 在 其 右 侧 还 可 设置 图 片 的 显示 效果 ， 如 图 4-21 所 示 。 
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名) 昔 贡 的 用 户 ， 图 片 宝 间 竺 升级 新 版 本 ， 观 已 开始 公 到 点 击 话 月 * 


四 a | = xf | 证 mw | | 二 


目 从 目 只 时 图 片 [图片 去 型 ， 全 部 ~v | 审 术 坊 : 正常 。 v | 排序: 时间 业 
名 符 类 型 尺寸 大 小 是 否 引用 时间 
里 和 广 # 夫 2018/03/16 08:45 
由 Sm 文人 夫 2018J03/16 08:45 
[ 让 文人 夫 201/03/16 08:45 
[ baner 文件 夹 2018/03/16 08:45 
[ 宝 由 图片 HR 2013/93/16 08:45 
[ 后 天 村 耻 fH 天 2018/03/16 08:45 
有 23p9 区 32oG20 9 百 2018/07/04 09:44 
吹 手机 店 招 jpg jpg R0920 7021k 理 2018/07/04 09;44 
Rs 手机 抢 休 图 ,jpg jpe T750199 5438k 理 2018/07/02 15:51 


[EE EE Ce ee | tw ms | | sri | 


@ RBA [mrs pe ses: ER v Wr: Hy)| sm 


| 名 和 
\， 柜 加 
、 录 本 


图 4-21 自 定 又 排序 


2. 图片 的 授权 


将 图 片上 传 至 图 片 空间 后 , 该 图 片 只 允许 当前 店铺 使 用 , 而 不 能 同时 共享 给 其 他 店铺 。 
但 是 很 多 淘宝 店铺 都 存在 多 个 子 店铺 ， 若 需要 逐一 上 传 会 很 麻烦 ， 此 时 可 以 通过 图 片 授权 
的 方式 来 分 享 图 片 。 设 置 方 法 为 : 打开 “图 片 空间 ”首页 , 单 击 “ 授 权 管 理 ”选项 卡 标签 ， 
进入 “授权 管理 ”页面 ,在 "添加 授权 的 店铺 ”文本 框 中 输入 需要 授权 的 旺旺 D , 单 击 “ 添 加 ” 
按钮 ， 打 开 提示 对 话 框 ， 单 击 “ 确 定 ”按钮 即 可 完成 授权 ， 如 图 4-22 所 示 。 授 权 成 功 后 ， 
将 会 显示 授权 店铺 的 授权 时 间 。 
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tadgettaobao.com 旺 示 
片 空 间 首页 ee 和 泽 生 所 会 启 区 要 受 汉 写 ? 


tu.taobao.com 
到 


您 最 多 可 将 图 片 手相 给 0 家 店铺 使 用 , 30 天 内 不 区 取消 授权 ! 


添加 授权 的 店铺 : 。 浮生 零食 店 


管理 授权 店铺 
图 4-22 ”授权 店铺 
3. 其 他 管理 方法 


图 片 空间 管理 方法 除 上 述 两 种 外 ， 还 有 几 种 其 他 方法 ， 如 重 命名 图 片 、 移 动 图 片 和 编 
辑 图 片 等 。 具 体 介绍 如 下 。 
*。 重 命名 图 片 : 将 图 片 命 名 为 对 应 商品 的 名 称 ， 可 以 使 图 片 更 加 直观 ,便于 管理 。 划 
方法 为 : 在 图 片上 传 之 后 ， 选 择 需 要 重 命 名 的 图 片 ， 单 击 图 片 下 方 的 文件 /文件 夹 
名 称 即 可 快速 复制 和 修改 名 称 ， 如 图 4-23 所 示 。 
。 移动 图 片 : 如 果 需 要 将 默认 上 传 到 图 片 空间 中 的 图 片 移动 到 其 他 文件 夹 中 ， 可 以 选 
择 该 图 片 ， 然 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “移动 ”选项 ， 打 开 “ 移 动 到 ”对 
话 框 ， 在 其 中 选择 要 移动 到 的 文件 位 置 ， 然 后 单 击 “ 确 定 ”按钮 ， 如 图 4-24 所 示 。 
返回 图 片 空间 ， 打 开 相 应 的 文件 夹 即 可 查看 被 移动 的 图 片 。 


编辑 
冰 、 通 配 手 机 


& X 员 际 
NS A 首 一 名 不 引 用 
ld a i 


图 4-23 ” 重 命 名 图 片 


图 4-24 ”移动 图 片 
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。 编辑 图 片 : 图 片 空间 提供 了 简单 的 图 片 编辑 功能 ， 供 用 户 对 图 片 进 行 调整 ， 如 美化 
图 片 、 添 加 水 印 、 添 加 边框 、 拼 图 、 添 加 文字 等 。 其 操作 方法 为 : 单 击 需要 编辑 的 
图 片 ， 单 击 上 方 操作 栏 中 的 “编辑 ”按钮 图 编 镶 ， 如 图 4-25 所 示 。 打 开 图 片 编辑 
页 面 进 行 编辑 ， 如 图 4-26 所 示 。 


国人 选 ”站 普 搞 | 与 移动 | AP 重 命名 本 外 过 可 手机 | X 蝇 涂 苗 一 铀 册 入 丰 引 用 


打 底 汶 


图 4-25 ”选择 需要 编辑 的 图 片 


Bum Hs mm oO hr Om sm 目 sm Om [ was | 


图 4-26 ”编辑 图 片 


4.2.3 图 片 空间 的 功能 

图 片 空间 是 一 个 人 在 互联 网 中 的 相册 ， 它 具有 普通 相册 的 基本 功能 ， 如 存储 图 片 、 替 
换 图 片 等 功能 。 除 这 些 基 本 功能 外 ， 图 片 空间 还 具有 上 传 、 替 换 、 引 用 、 搜 索 及 搬家 等 办 
助 功能 。 

1. 将 图 片上 传 至 图 片 空间 


进行 装修 或 发 布 商品 前 ， 卖 家 即 可 将 需要 使 用 的 图 片上 传 到 图 片 空间 ， 当 需要 使 用 对 
应 的 图 片 时 即 可 直接 从 文件 夹 中 选择 ， 具 体操 作 如 下 。 
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ES 登录 淘宝 卖家 中 心 ， 在 左 侧 列表 框 中 的 “店铺 管理 ” 栏 中 单 击 “ 图 片 空间 ” 
超 链接 ， 如 图 4-27 所 示 。 


支付 子 订 单数 
多 宝贝 管理 0 
发 布 宝贝 出 售 中 的 宇 贝 
柱 窗 推荐 体检 中 心 昨日 全 天 
是 店铺 管理 
二 看 淘 主 店 尘 “ 店 渤 壬 修 等 办 事项 
图 片 空间 手机 淘 主 店铺 
违规 提醒 
图 4-27 进入 图 片 空 间 
人 GE 在 页 面 厂 上 方 单 击 “ 新 建文 件 夹 ” 按钮 Eaassx ,打开 “新 建文 件 夹 ”" 对 话 框 ， 


输入 用 于 上 传 图 片 的 文件 夹 名 称 ,此 处 输入 “宝贝 图 片 ”, 单 击 “ 确 定 ” 按钮 ,如 图 4-28 所 示 。 


新 建文 件 夫 
请 输入 文件 夹 名 称 


图 4-28 ”新 建文 件 夹 


人 ES 在 图 片 空间 中 ,双击 打开 新 建 的 “宝贝 图 片 ”文件 夹 ,在 页 面 右 上 方 单 击 “ 上 
传 图 片 ” 按 钮 国 国 二 一 ， 如 图 4-29 所 示 。 


图 片 目录 到 苯 动 的 用 户 , 图片 空 辣 村 升级 新 版 本 ， 现 三 开始 公 惠 ， 志 二 试用 > 
术 人 RN | | 2 EE © mex | & st 
Fe Se 日 RE 上 [HD ~ [EA 
宝 由 图片 


图 4-29 上传 图 片 
GE 六 入 “打开 ”对 话 框 ， 选 择 宝贝 路 径 ， 选 中 需要 上 传 的 图 片上 传单 张 图 片 ， 
或 按 Ctrl 键 单 击 多 张 图 片 批量 上 传 ， 最 后 单 击 “ 打 开 ” 按 钮 ， 如 图 4-31 所 示 。 
EB 此 时 “图 片上 传 提示 ”对 话 框 将 打开 ,并 显示 图 片 的 上 传 速度 。 上 传 完成 后 ， 
自动 返回 图 片 空间 并 提示 完成 图 片上 传 ， 关 闭 提示 窗口 ， 即 可 查看 上 传 的 图 片 ， 如 图 4-32 
所 示 。 
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An 


目 添加 水 印 “ 目 图 片 宽度 调整 


小 提示 : 1. 图 片 单 张大 小 支持 3M 以 下 
2. 宽度 调整 和 使 用 水 印 可 能 会 使 图 片 失真 
3. 支持 的 图 片 格式 : jpg、jpeg、png、gif 


图 4-30 选择 下 传 方式 


图 4-31 ”选择 上 传 的 图 片 


图 片 目录 加 苦 抽 用户， 图 片 空间 村 和 名 新 版 本 ， 现 已 开始 侧 ， 点 击 试用 。 
按 六 件 夫 名 和 于 搜索 Q | | 四 全 全 上 
三 二 本 本 


图 4-32 ”查看 上 传 的 图 片 
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2. 删除 与 还 原 空间 图 片 


删除 图 片 空间 中 未 引用 的 图 片 ， 可 以 节约 空间 容量 ， 方 便 以 后 上 传 其 他 商品 图 片 到 空 
间 中 。 删除 的 图 片 会 在 回收 站 中 存储 7 天 ， 
若 在 7 天 内 需要 再 次 使 用 该 图 片 ， 可 以 将 


其 从 回收 站 中 恢复 到 图 片 空间 ， 其 具体 操 “ns 
作 如 下 。 


EE 进入 “图 片 空间 ”页 面 , 打 
开 需 要 删除 图 片 所 在 的 文件 夹 ， 图 片 右上 详情 页 5jpg 详情 页 6jpg 
角 出 现 “ 引 ”字符 号 的 图 片 为 已 经 引用 的 
图 片 ， 如 图 4-33 所 示 。 
EB 拉 ctl 键 单 击 选择 未 引用 的 图 片 ， 在 打开 的 工具 栏 中 单 击 “ 删 除 ” 按 钮 
x WW 除 ， 即 可 删除 未 引用 的 图 片 ， 如 图 4-34 所 示 。 


图 4-33 ”识别 被 引用 的 图 片 


全 选 ” 因 多 图 复制 | 所 移动 | * 适 配 手机 | X 是 除 盖 一 键 出 除 丰 引用 


图 4-34 ”删除 未 引用 的 图 片 
SSE》 在 页 面 上 方 单 击 “ 回 收 站 ”按钮 smws ， 进 入 回收 站 页 面 ， 如 图 4-35 所 示 。 
选择 需要 还 原 的 图 片 ， 单 击 “ 还 原 ” 按 钮 多 ， 如 图 4-32 所 示 ， 即 可 将 该 图 片 还 原 到 图 
片 空间 。 


9 还 原 | X 永久 喇 除 
名 称 


连衣裙 .jpg 


两 件 套 连衣裙 -jpg 


图 4-35 ”在 回 惧 站 中 还 原 图 片 


3. 替换 空间 图 片 

在 淘宝 图 片 空 间 中 ， 可 以 将 已 上 传 图 片 蔡 换 为 其 他 图 片 ， 但 是 替换 图 片 后 店铺 引用 的 
片 也 会 随 着 发 生变 化 ， 其 具体 操作 如 下 。 

ES 选中 图 片 空间 中 需要 替换 的 图 片 ， 单 击 顶部 工具 栏 中 的 “替换 ”按钮 也 营 搞 ， 
如 图 4-36 所 示 。 


| 
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全 轩 所 移动 | 人 重 命名 | 加 编辑 | * 适 本 手机 | X 于 全 一 匀 抽 涂 丰 引 用 
To 22jm 


生生 作 


11jpg 5jpg 


图 4-36 选中 替换 图 片 
ES 打开 “替换 图 片 ”对 话 框 ， 单 击 “选择 文件 ”按钮 匿 七 国 ， 如 图 4-37 所 示 。 
车 换 图 片 


图 片 欧 换 后 1 小 时 内 生效 。 商 品 主 图 不 支持 营 换 ， 请 进入 商品 发 布 页 进行 编辑 。 
| 迁 绎 文件 | 未 选择 任何 文件 
添加 水 印 


Bl ws 


图 4-37 选择 上 传 的 图 片 文 件 


人 GE 打开“ 打开” 对话 框 ， 在 其 中 选择 要 替换 上 的 图 片 ， 单 击 “ 打 开 ” 按 钮 
于 oH， 如 图 4-38 所 示 。 


3- 


bp 
刷 志 背心 jpg 。。 连 衣 雪 jpg 


图 4-38 ”选择 要 替换 上 的 图 片 
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EY 返 品 “替换 图 片 ” 对 话 框 ， 单 击 “ 确 定 ”按钮 六 凤 即 可 完成 替换 ， 替 换 后 的 
效果 如 图 4-39 所 示 。 


全 迁 冯 苦 换 | 所 移动 | 浪 重 命名 | 国 编 


图 4-39 ”查看 蔡 换 效果 


43 本 章 小 结 


本 章 主要 介绍 了 商品 图 片 的 切片 与 管理 ， 包 括 图 片 的 切片 与 优化 和 网 店 图 片 管理 的 相 
关 知 识 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 认识 切片 的 作用 ， 了 解 图 片 空间 的 作用 及 使 用 方法 ， 
同时 熟悉 标尺 和 辅助 线 的 使 用 方法 ， 能 够 将 图 片 制作 成 切片 形式 。 
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网 店 装修 元 素 的 设计 与 制作 


学 习 目 标 

知识 目标 | 。 认识 Logo 的 定义 与 类 型 

。 了 解 店 标的 设计 要 点 

。 掌握 静态 店 标的 制作 方法 和 设计 要 点 
。 掌握 动态 店 标的 制作 方法 

。 掌握 店铺 背景 的 制作 方法 


技能 目标 


店铺 装修 元 素 设计 的 好 坏 ， 直 接 影响 买 家 对 店铺 的 第 一 印象 。 例 如 ，Logo 作 为 最 具 标示 性 的 
元 素 ， 可 以 反复 加 强 买 家 对 品牌 的 印象 ， 形 成 品牌 烙印 ; 精美 的 店 标 可 以 在 第 一 时 间 吸 引 买 家 进 
入 ; 店铺 背景 可 以 烘托 整个 店铺 的 氛围 。 本 章 将 从 店铺 Logo 的 设计 、 店 标的 设计 、 店 铺 背 景 的 制 
作 三 方面 介绍 店铺 最 基础 装修 元 素 的 设计 与 制作 方法 。 
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5.1 Logo 的 设计 


Logo 是 店铺 最 重要 的 标志 之 一 ， 常 常 出 现在 店铺 页 面 和 商品 图 片 中 ， 通 过 Logo 可 以 
展示 和 宣传 店铺 ， 将 店铺 的 形象 、 特 点 与 其 他 店铺 区 分 开 来 ， 增 加 店铺 的 辨识 度 ， 从 而 使 
客户 形成 对 店铺 品牌 的 烙印 。 


5.1.1 什么 是 店铺 Logo 


Logo 也 称 标志 ， 主 要 通过 造型 简单 和 意义 明确 的 视觉 符号 ， 将 经 营 理念 、 企 业 文化 、 
经 营 内 容 和 产品 要 素 等 的 一 个 方面 或 几 个 方面 传递 给 买 家 。 店 铺 Logo 是 店铺 视觉 形象 的 
核心 ， 也 是 构成 店铺 形象 的 基本 特征 ， 能 够 体现 店铺 的 内 在 素质 ， 它 不 仅 是 调动 店铺 视觉 
的 主导 因素 ， 也 是 整合 视觉 要 素 的 中 心 。 

店铺 Logo 既 可 以 应 用 在 店 招 中 ， 也 可 以 应 用 在 宝贝 主 图 、 店 标 设计 中 ， 图 5-1 所 示 
即 为 一 些 较 为 成 功 网 店 的 店铺 Logo 在 店 招 中 的 应 用 。 


图 5-1 店铺 Logo 案 例 


5.1.2 ”店铺 Logo 的 类 型 


Logo 是 店铺 的 形象 ， 优 秀 的 店铺 Logo 可 以 起 到 宣传 店铺 的 作用 ， 吸 引 买 家 。Logo 
的 外 形 丰 富 ， 设 计 者 可 发 挥 的 想象 空间 很 大 ， 从 视觉 上 
可 以 分 为 文字 Logo、 图 形 Logo 和 图 文 结合 型 Logo 3 种。 

。 文 字 Logo: 文字 Logo 是 以 文字 、 名 称 为 表现 主 

体 , 一 般 是 由 品牌 名 称 、 缩 写 或 者 抽取 其 中 个 别 
有 趣 的 文字 ， 通 过 重新 排列 、 文 字 扭曲 、 颜 色调 
整 等 方式 设计 成 标示 。 如 “ 卫 龙 ”标志 ， 即 以 其 
名 称 为 标志 , 以 红色 为 底 色 , 以 白色 为 文字 颜色 ， 
颜色 对 比 鲜明 ， 文 字 醒 目 ， 且 采用 可 爱 又 简单 的 
形式 ， 容 易 记 忆 ， 如 图 5-2 所 示 。 

。 图 形 Logo: 以 具体 的 图 形 来 表现 品牌 的 名 称 或 图 5-2 ”文字 Logo 
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商品 的 属性 ， 相 对 于 文字 Logo 更 为 直观 和 富有 感染 力 ， 如 Apple 公司 使 用 苹果 的 

图 形 作为 Logo。 大 嘴 猴 童装 店铺 使 用 大 嘴 猴 的 卡通 形象 作为 Logo， 如 图 5-3 所 示 。 
相 较 于 文字 Logo， 图 形 Logo 表达 的 含义 更 为 直观 ， 也 更 具 感 染 力 。 

。 图 文 结合 型 Logo: 图 文 结合 型 Logo 是 由 图 形 与 文字 结合 构成 的 ， 表现 为 文中 有 图 、 
图 中 有 文 的 图 形 特征 ， 如 图 5-4 所 示 。 


图 5-3 图形 Logo 图 5-4 ”图 文 结合 型 Logo 


5.1.3 ”店铺 Logo 的 制作 


店铺 Logo 是 一 个 店铺 最 具 标 识 性 的 元 素 ， 是 店铺 装修 中 必 不 可 少 的 一 部 分 。 下 面 以 
大 魔 树 女 装 店铺 Logo 制作 为 例 ， 讲 解 Logo 的 制作 方法 。 首 先 分 析 Logo 的 表现 形式 ， 本 
案例 将 采取 图 文 结合 的 Logo 类 型 ， 绘 制 一 个 大 树 的 图 形 ， 配 合 “ 大 魔 树 ” 大 写 拼音 作为 
Logo 主体 外 形 。 然 后 选取 Logo 的 色调 ， 由 于 店铺 经 营 的 是 高 端 女 装 ， 故 选用 具有 高 贵 大 
气 的 紫色 和 代表 女性 的 粉色 搭配 ，Logo 的 制作 效果 如 图 5-5 所 示 ， 具 体操 作 方法 如 下 。 


DAMOSHU 


ew 


图 5-5 ”店铺 Logo 


打开 Illustrator CS6 软件 , 按 Ctrl+N 组 合 键 新 建 一 个 “宽度 ”为 400 像素 “高 
度 ” 为 400 像素 的 画布 ， 并 命名 为 “大 魔 树 女装 Logo"， 如 图 5-6 所 示 。 
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图 5-6 新建 画布 


GE 远 择 “椭圆 工 具 " 国 ,在 选项 栏 中 设置 参数 “填充 "为 无 ,“ 描 边 " 设 置 为 1 像素 ， 
在 画布 上 单 击 ， 绘制 一 个 大 小 为 293 像素 的 正 圆 形 ， 如 图 5-7 所 示 

ES》 远 择 “ 算 形 工具 " 国 , 在 选项 栏 中 设置 参数 “填充 ” 为 黑色 ,“ 描 边 ” 设置 为 无 ， 
绘制 一 个 大 小 为 45 像素 x 130 像素 的 和 矩形， 放置 位 置 如 图 5-8 所 示 


0 


图 5-7 绘制 正 圆 图 5-8 ”和 矩形 
人 GZ 选择 “添加 错 点 工具 " 国 , 在 矩形 上 方 添加 一 个 锚 点 ,并 单 击 工具 栏 上 方 的 “将 
所 选 错 点 转化 为 平滑 ”按钮 胶 将 其 转化 为 平滑 错 点 ， 如 图 5-9 所 示 。 


图 5-9 ”转换 锚 点 


GE 选择 “直接 选择 工具 ” 国 ， 选 中 新 添加 的 锚 点 ， 向 上 拖 奥 并 适当 调整 手柄 
至 如 图 5-10 所 示 的 效果 。 
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有 
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EB》 按照 step3 和 Step4 的 方法 ， 将 矩形 调整 至 如 图 5-11 所 示 的 树干 效 


图 5-10 移动 、 调 整 锚 点 图 5-11 调整 矩形 
EHD 选择 “钢笔 工具 


置 为 4pt, 圆 角 设置 为 “ 圆 角 端点 ” 
at -条 路 径 


bs 


”加 在 工具 属性 栏 中 设置 参数 “填充 ”为 无 ,“ 描 边 ” 设 
参数 如 图 5-12 所 示 。 设 置 完成 后 在 圆 内 绘制 出 如 图 5-13 


lc 
边 角 : F 本 加 限制 :四国 : 
图 5-12 ”设置 描 亡 参数 图 5-13 路径 


EB》 按照 step7 的 方法 


将 该 路 径 扩 展 为 形状 ， 扩 展 前 后 的 对 比 图 如 图 5-15 和 图 5-16 所 示 


绘制 路 径 ， 效 果 如 图 5-14 所 示 。 依 次 按 Alt 一 0 一 和 X 键 ， 


图 5-15 扩展 轮 廉 图 5-16 扩展 轮廓 后 


图 5-14 ”绘制 路 径 
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GE》 按 shift+Ctl+F9 组 合 键 , 调 出 “路 径 查 找 器 " 面板 ,选中 树干 及 树枝 , 单 击 “ 联 
集 ” 按 钮 图 尾 树干 和 树枝 进行 合并 ， 如 图 5-17 所 示 。 


图 5-17 合并 形状 


TD 远 择 “钢笔 工具 ” 国 绘 制 树叶 ， 如 图 5-18 所 示 ， 将 其 复制 排列 至 图 5-19 
所 示 的 效果 。 选 中 所 有 树叶 ， 按 Ctrl+G 组 合 键 进行 编组 


图 5-18 绘制 树叶 图 5-19 树叶 排列 


GE 迁 择 “钢笔 工具 ” 园 ， 在 工具 属性 栏 中 设置 参数 “ 描 边 ”为 无 ， 绘 制 树 根 ， 
如 图 5-20 所 示 。 按 照 Step9 的 方法 将 其 合并 形状 ,效果 如 图 5-21 所 示 


A 


图 5-20 ”给 制 树 根 图 5-21 合并 形状 


选择 “椭圆 工具 ”图 ， 在 工具 属性 栏 中 设置 参数 “ 描 边 ” 为 无 ,绘制 一 个 
大 小 为 80 像素 的 正 圆 形 ， 放 置 在 如 图 5-22 所 示 的 位 置 

选中 树干 形状 及 刚 绘制 的 正 圆 形 ， 在 路 径 查找 器 中 , 单 击 “ 减 去 顶层 ” 按 
钮 国 , 减 去 圆 形 所 占 区 域 ， 效 果 如 图 5-23 所 示 。 
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和 


图 5-22 ”绘制 正 贺 形 图 5-23 ” 减 去 顶层 圆 形 
用 “钢笔 工具 ”绘制 土地 ， 如 图 5-24 所 示 。 将 其 放置 在 合适 位 置 ， 删 除 最 
外 面 的 圆 形 描 边 ， 效 果 如 图 5-25 所 示 
—— 
图 5-24 ”绘制 土地 


ETB 选择 “文字 工具 ” 国 ， 在 工具 属性 栏 设置 字符 为 2006、regular， 大 小 为 76 
像素 ， 在 画布 中 输入 DAMOSHU 文本 ， 并 将 其 放置 在 如 图 5-26 所 示 的 位 置 


DAMOSHU 


图 5-25 ”删除 圆 形 描 启 图 5-26 输入 文本 
GE 选中 文本 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 “创建 轮廓 ”选项 ,效果 如 图 5-27 
所 示 
ES 按 Ctrl+A 组 合 键 ， 选 中 所 有 形状 ， 如 图 5-28 所 示 


PRAOPREHU PASSHU 


图 5-27 创建 轮 序 图 5-28 选中 所 有 形状 
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SEE 双击 “渐变 工具 ”图 设 置 渐变 参数 ， 具 体 设置 参数 如 图 5-29 所 示 ， 添 加 颜 


色 后 的 Logo 如 图 5-30 所 示 。 


图 5-30 ”添加 颜色 


图 5-31 拉 渐 变 


GE》 按 Ctrl+A 组 合 键 选 中 所 有 形状 ， 再 按 Cul+G 组 合 键 对 其 进行 编组 。 最 后 先 
择 “ 文 件 ” 一 “导出 ”命令 ， 导 出 为 png 格式 ，Logo 制作 完成 ， 效 果 图 如 图 5-5 所 示 。 


5.2 ” 店 标 的 设计 


5.2.1 什么 是 店 标 


店 标 是 指 店铺 的 标志 ， 通 常 显示 在 无 线 端 店铺 首页 左下 角 或 买 家 在 搜索 店铺 时 ， 店 铺 
会 以 店 标 + 店铺 名 称 、 主 营 项 目 等 方式 展示 ， 如 图 5-32 所 示 。 好 的 店 标 可 以 表达 出 店铺 
的 独特 风格 ， 且 可 视 度 较 高 ， 能 让 人 一 眼 记 住 。 好 的 店 标 可 以 吸引 买 家 单 击 进入 店铺 。 因 
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此 ， 对 于 买 家 而 言 制作 一 个 有 个 性 的 店 标 是 网 店 必 须 完成 的 一 项 工 
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图 5-32 ” 店 标 显示 住 置 
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店 标 分 为 静态 店 标 与 动态 店 标 。 静 态 店 标 主要 为 GEF 、JPG、JPEG、PNG 格式 的 静态 
图 片 ， 如 图 5-32 所 展示 的 样式 ; 而 动态 店 标 则 为 GIF 格式 的 动态 图 片 。 卖 家 可 根据 需求 
选择 静态 店 标 或 动态 店 标 。 


5.2.2 ”上 店 标 的 设计 要 点 


店 标的 设计 会 因 店铺 的 产品 定位 、 店 铺 风格 的 不 同 而 有 所 不 同 ， 所 以 店 标的 设计 千 变 
万 化 ， 有 的 比较 时 尚 新 颖 ， 有 的 比较 大 气 稳重 ， 有 的 比较 搞怪 有 趣 ， 有 的 比较 甜美 。 设 计 
店 标 时 ， 通 常 需要 注意 以 下 几 个 方面 。 

。 店 标的 尺寸 要 求 : 店 标 的 设计 应 符合 店铺 装修 后 台 的 尺寸 要 求 ， 否 则 很 容易 导致 图 

片 变形 ， 这 样 不 仅 影 响 视 沉 效果， 也 会 导致 一 些 客户 群 流失 。 淘 宝 店 标的 文件 格式 
为 GIF、JPG、JPEG、PNG, 尺寸 建议 为 80 像素 x 80 像素 , 文件 大 小 为 80KB 以 内 。 
。 店 标的 外 观 : 由 于 店 标 有 尺寸 限制 ， 所 以 设计 店 标 时 不 宜 太 过 复杂 ， 要 便于 查看 ， 
因此 店 招 要 尽量 简洁 , 可 以 是 简单 的 图 形 或 图 形 组 合 ,甚至 直接 将 店名 制作 成 店 标 。 
动态 店 标的 动画 不 宜 过 于 复杂 ， 动 画 跳 转 速度 不 宜 过 快 ， 否 则 容易 造成 买 家 的 视觉 
疲劳 。 

。 让 买 家 过 目 不 忘 : 一 个 好 的 店 标 要 从 颜色 、 图 案 、 字 体 和 动画 等 方面 人 手 。 所 制作 

的 店 标 要 在 符合 店铺 类 型 的 基础 上 ， 使 用 醒目 的 颜色 、 独 特 的 图 案 、 漂 亮 的 字体 或 
直观 的 动画 效果 以 给 人 留 下 深刻 印象 。 

。 统 一 性 : 店 标的 外 观 、 颜 色 要 与 店铺 风格 统一 ， 不 能 只 考虑 好 看 而 与 店铺 主题 不 符 。 

若 制 作 动态 店 标 ， 还 要 考虑 效果 的 变化 是 否 符合 需求 。 


5.2.3 ”上 店 标的 制作 


上 面 提 到 店 标 分 为 静态 店 标 和 动态 店 标 ， 本 节 仍 以 大 魔 树 女装 店铺 的 店 标 制作 为 例 进 
行 介绍 。 为 贴 合 店铺 形象 使 店铺 整体 统一 ， 案 例 将 基于 店铺 Logo 对 店 标 进行 设计 。 下 面 
分 别 介绍 静态 店 标 与 动态 店 标的 制作 方法 。 


1. 制作 静态 店 标 


静态 店 标 多 由 文字 和 图 像 组 成 ， 卖 家 单 击 店 标 图 片 的 任意 一 个 部 分 即 可 快速 跳 转 到 店 
铺 首页 中 ， 本 案例 将 对 “大 魔 树 女装 店 ”店铺 进行 静态 店 标的 制作 ， 制 作 时 根据 Logo 的 
元 素来 制作 店 标 ， 其 具体 操作 如 下 。 

ES》 打开 Photoshop CS6 软件 , 新 建 一 个 “宽度 ”为 80 像素 “高 度 ”为 80 像素 、 
“分 辨 率 ”为 72 像素 /英寸 ,“ 背 景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “大 魔 树 店 标 "， 如 
图 5-33 所 示 。 

EP 糙 素材 文件 “大 魔 树 - 树 png" 置 人 到 “大 魔 树 店 标 "文档 中 ,如 图 5-34 所 示 。 
按 Enter 键 确定 置 人 。 
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全 也 二 关 工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


名 称 (N): 
预 设 (P): 自 定 


存储 预 设 (5)..… 
宽度 (W): 出 除 预 设 (D). 


高 度 (H): 
分 辩 率 (R): 
颜色 模式 (M): 
背景 内 容 (C): 


高 级 


图 5-33 新建 文档 设置 
GE 选择 “窗口 ”一 “字符 ”命令 调 出 “字符 ”面板 ,在 “字符 ”面板 中 设置 参 
数 ， 如 图 5-35 所 示 。 选 择 “ 横 排 文 字 工 具 ” 国 输入 文本 “大 魔 树 ”"， 如 图 5-36 所 示 。 


图 5-34 ” 置 入 形状 图 5-35 ”设置 字符 参数 图 5-36 输入 文本 


GE 选中 “大 魔 树 ”文本 图 层 ， 单 击 图 层 下 方 的 “图 层 样式 ”按钮 盯 ， 在 弹出 
的 菜单 中 选择 “渐变 稍 加 ”选项 为 其 添加 渐变 释 加 效果 ， 渐 变 释 加 参数 如 图 5-37 所 示 。 


Tan 一 面 
i | KA) 回 和 RNCV) 
李 式 0: [LE 性。 ] 问 与 图 对 齐 由 国 
| 鱼 m， 皖 sw | | le Re: (1 区 
aa % 
源 训 类 型 (T): 实 床 g 5 
平滑 度 (M):| 100 |% ES ET 


| 本 


R:202 G.68 B:147 s R:35G:32 B:68 | 全 | 


| se ei % 
| 
图 5-37 ”渐变 参数 设置 
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GE 最 后 按 Ctrl+s 组 合 键 和 CtrlHShiftrS 组 合 键 将 其 
PSD 格式 和 PNG 格式 的 文件 保存 到 相应 文件 夹 内 。 至 此 ， 大 
魔 树 店 标 制 作 完 成 ， 完 成 的 效果 图 如 图 5-38 所 示 。 


2. 制作 动态 店 标 

动态 店 标 实际 就 是 将 多 个 图 像 和 文字 效果 构成 GIF 动画 ， 
该 动画 不 但 醒目 ， 而 且 美 观 。 本 节 将 继续 在 静态 店 标的 基础 上 
制作 动态 店 标 。 

人 GES》 使 用 Photoshop CS6 软件 打开 素材 文件 “大 魔 树 
店 标 psd"， 将 其 另存 为 “大 魔 树 动态 店 标 ”文件 。 

EE 选择 “窗口 ”一 “时 间 轴 ”命令 , 单 击 “ 复 制 所 选 帧 ”按钮 图 |, 复制 所 选 帧 。 
选择 第 一 帧 ， 在 图 层面 板 中 将 “大 魔 树 ” 文 本 图 层 和 “矢量 智能 对 象 ”图 层 的 不 透明 度 设 
置 为 30%， 如 图 5-39 所 示 。 

人 SEE 远 树 第 二 帧 ， 在 图 层面 板 中 将 “大 魔 树 ” 文 本 图 层 和 “矢量 智能 对 象 ”图 层 
的 不 透明 度 设置 为 100%， 如 图 5-40 所 示 。 


图 5-38 ”效果 图 


图 5-39 ”设置 第 一 帧 的 不 诈 明 度 图 5-40 设置 第 二 帧 的 不 透明 度 
人 GE 远 树 第 一 巾 ， 单 击 其 右 下 方 的 图 按钮 ， 在 下 拉 列 表 中 选择 “0.1” 选 项 ,设置 
第 一 帧 的 播放 时 间 。 选 择 第 二 帧 , 单 击 其 右 下 方 的 图 禄 钮 , 在 下 拉 列 表 中 选择 “0.5” 选 项 ， 
设置 第 二 帧 的 播放 时 间 ， 如 图 5-41 所 示 。 


0% 重 文档 :18.8K/50.0K 上 


图 5-41 设置 时 间 轴 


按 住 Shift 键 选择 两 个 关键 帧 , 单 击 “ 过 渡 动 画 帧 "按钮 才 ,将 “要 添加 的 帧 数 ” 
设置 为 2， 如 图 5-42 和 图 5-43 所 示 。 
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全 语 关 工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


过 入 方式 (D: 上 -- 帧 ~ 
要 hk(F): 昌 


一 图 层 
回 所 有 图 层 (A) 


了 选中 的 图 层 (5) 
三 参数 

回 位 置 (P) 

同 趟 透明 度 (D) 

回 效果 (E) 


图 5-42 这 湾 动画 核 设 置 


图 5-43 ”添加 证 渡 动 画 帧 

名 在 “时 间 轴 ”面板 下 方 单 击 “ 一 次 ” 右 侧 的 国 按 钮 ,在 弹出 的 列表 中 选择 “ 永 
项 ， 如 图 5-44 所 示 。 单 击 其 右 侧 的 国 、 国 接 钮 可 以 播放 
动画 、 删 除 选择 帧 。 

GE39 按 ctrltShift+Alt+s 组 合 键 将 其 存储 为 Web 所 用 格 
式 ， 选 择 GIF 格式 存储 。 单 击 “存储 ”按钮 ， 在 弹出 的 “将 优化 
结果 存储 为 ”对 话 框 中 ， 选 择 文件 的 存储 位 置 ， 并 在 文本 框 中 为 
该 动态 店 标 起 名 为 “大 魔 树 动态 店 标 ” ,如 图 5-45 所 示 。 单 击 “ 保 
存 ” 按 钮 进行 保存 。 


选 


图 5-45 ”存储 文件 
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5.3 ”店铺 背景 的 制作 


店铺 背景 是 网 店 装修 中 必 不 可 少 的 一 部 分 ， 除了 使 用 网 店 系统 自 带 的 纯色 背景 外 ， 还 
可 制作 具有 独特 个 性 且 符 合 气 氛 的 背景 。 下面 对 背景 的 设计 要 求 和 制作 方法 进行 具体 讲解 。 


5.3.1 ”店铺 背景 的 设计 要 求 


店铺 背景 不 只 有 纯色 ,卖家 还 可 以 根据 店铺 风格 制作 不 同样 式 的 背景 图 片 。 在 制作 时 
需要 掌握 背景 的 设计 要 点 ， 主 要 包括 以 下 几 点 。 

。 大 小 : 制作 背景 图 时 ， 背 景 图 的 大 小 不 能 过 大 ， 以 免 影 响 页 面 的 加 载 速度 ， 最 终 造 

成 客 源 的 流失 。 

。 图案 : 制作 背景 图 时 ， 为 了 页 面 的 整洁 度 ， 设 计 的 背景 图 案 不 能 过 于 花哨 ， 也 不 能 

颜色 杂乱 ， 以 免 影响 产品 显示 效果 。 

。 衔 接 : 为 了 使 制作 的 背景 图 统一 协调 ， 在 设计 背景 时 ， 应 注意 是 否 能 在 平 铺 的 情况 

下 实现 无 缝 衔接， 以 免 出 现 页 面 不 统一 的 情况 。 


5.3.2 ”店铺 背景 的 制作 


下 面 以 大 魔 树 女装 店铺 背景 制作 为 例 ， 讲 解 背景 的 制作 方法 。 图 5-46 和 图 5-47 所 示 
分 别 为 有 背景 和 无 背景 的 店铺 截图 ， 其 背景 由 多 条 线条 组 成 ， 此 种 背景 既 简单 又 可 以 让 页 
面 更 整洁 且 有 设计 感 。 在 制作 时 ， 不 需要 绘制 整个 线条 ， 只 需 绘制 出 背景 的 一 小 块 最 后 进 
行 平 铺 即 可 。 其 具体 操作 方法 如 下 。 


图 5-46 有 背景 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


图 5-47 无 背景 


人 GE》 和 过 择 “文件 ”一 “新 建 ”命令 ， 在 弹出 的 “新 建 ”面板 中 填写 画布 名 称 并 设 
置 画布 大 小 ， 具 体 参数 如 图 5-48 所 示 。 


删除 RD) 


像素 /英寸 ~ 
:RGB 颜色 > 8 位 
白色 


:工作 中 的 RGB: sRGB 下 C6196... ~ 
方形 像素 4 


图 5-48 ”新 建 画布 


GE 在 图 层面 板 下 方 单 击 “ 新 建 图 层 ” 按 钮 图 新 建 图 层 ， 如 图 5-49 所 示 。 

人 GE》 选择 “缩放 工具 " 国 将 画布 放大 。 设置 前 景色 为 灰色 ( R:210,G:210,B:210)。 
选择 “矩形 选 框 工具 " 国 在 面 布 中 框 选 1 像素 ,并 按 AlttDelete 组 合 键 填充 前 景色 ,如 图 5-50 
所 示 ， 按 CtrltD 组 合 键 取 消 选 择 。 


图 5-50 ”绘制 并 填充 选区 
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人 ESZ9 在 图 层面 板 中 选中 “图 层 1” 和 “背景 ”图 层 ， 选择“ 移动 工具 ” 国 ， 在 先 
项 栏 中 单 击 “ 垂 直 居中 对 齐 ” 按 钮 国 将 其 进行 垂直 居中 对 齐 操作 ， 如 图 5-51 所 示 。 

按照 Step3 和 Step4 的 方法 在 水 平 居中 方向 绘制 一 个 1 像素 的 选区 。 至 此 ， 
背景 图 制作 完成 ， 如 图 5-52 所 示 。 最 后 按 Ctrl+Shift+S 组 合 键 将 其 以 PNG 格式 保存 到 指 
定 文件 夹 内 。 


图 5-51 垂直 居中 对 齐 图 5-52 ”页面 背景 效果 图 


5.4 本 章 小 结 


本 章 主要 介绍 了 网 店 装修 元 素 的 设计 与 制作 的 相关 知识 ， 主 要 包括 店铺 Logo 的 设计 、 
店 标的 设计 以 及 店铺 背景 的 制作 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 对 店铺 Logo 与 店 标的 设计 有 基础 认识 ， 可 以 设计 店 
铺 Logo， 能 够 制作 静态 店 标 、 动 态 店 标 以 及 店铺 背景 。 
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快速 制作 店铺 首页 


学 习 目 标 

知识 目标 | 。 了解 店铺 首页 的 整体 布局 和 基础 模块 

。 了解 店 招 、 导 航模 块 、 轮 播 图 、 页 尾 的 设计 要 求 

。 了 解 无 线 端 首页 布局 和 基础 模块 

。 掌握 PC 端 首 页 设计 技巧 ， 能 够 设计 店 招 、 导 航 、 轮 播 图 及 页 尾 模块 。 
。 掌握 无 线 端 首页 设计 技巧 ， 能 够 对 无 线 端 首页 各 个 模块 进行 设计 。 


技能 目标 


店铺 首页 是 网 络 商 家 的 门面 ， 也 是 买 家 对 店铺 第 一 印象 的 主要 来 源 。 设 计 精 良 的 店铺 首页 可 以 
引导 买 家 、 提 高 店铺 转化 率 。 设 计 粗糙 的 店铺 首页 则 会 影响 店铺 的 品牌 宣传 和 顾客 的 购物 体验 。 本 
章 将 从 PC 端 和 无 线 端 两 个 角度 详细 讲解 店铺 首页 的 制作 技巧 。 


第 6 章 | 快速 制作 店铺 首页 


6.1 PC 端 首页 规划 方案 


PC 端 首页 是 指 在 个 人 计算 机 端口 显示 的 首页 页 面 。 店 铺 首页 是 店铺 形象 展示 的 窗 
口 ， 体 现 了 店铺 的 风格 和 定位 。 因 此 如 何 规划 、 设 计 出 具有 自身 特色 的 店铺 风格 尤为 重 
要 。 本 节 将 从 店铺 首页 布局 、 模 块 、 风 格 、 框 架 搭建 几 个 方面 详细 讲解 PC 端 首页 的 规划 
方案 。 


6.1.1 了 解 店铺 首页 布局 及 模块 


一 个 完整 的 淘宝 店铺 中 ， 首 页 的 页 面 中 包含 很 多 模块 ， 其 中 有 一 些 模块 在 固定 位 置 ， 
有 一 些 模块 可 以 随意 调整 移动 ,总 的 来 说 可 以 将 首页 分 为 头 . 中 、 尾 三 大 区 域 ,如 图 6-1 所 示 。 
在 这 三 块 区 域 中 店 招 、 导 航 条 及 店铺 页 尾 所 在 位 置 为 固定 区 域 ， 无 法 移动 ， 而 中 部 的 模块 
区 则 可 以 随意 移动 。 


避 勤 忆 洁 天 序 水 东 


风 剖 过 慌 忆 其 启东 融 


@ 店 铺 背 景 mn 四 店铺 背景 
模 a O 产 帅 自 定 RE Eee 
让 mi 
位 
天 
六 | 
| 
动 


图 6-1 店铺 首页 基础 布局 


除 图 6-1 中 涉及 的 模块 外 ， 在 店铺 首页 设计 中 还 有 一 些 常 用 的 小 模块 ， 具 体 介绍 
如 下 。 
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。 宝 贝 推荐 模块 : 店铺 中 的 宝贝 推荐 模块 就 像 是 一 条 横幅 ， 宝 贝 推荐 模块 可 以 自动 添 
加 店铺 中 销量 最 好 的 产品 ， 或 手动 添加 想 要 打造 的 爆 款 至 该 模块 ， 通 常会 放置 在 
店铺 首页 或 商品 详情 页 左 侧 ， 图 6-2 展示 了 某 店铺 详情 页 中 宝贝 推荐 模块 装修 后 的 
效果 。 


EE 三 只 江 情 te 0 专 李 服务 手机 WS 器 


i 尺 三 洋 傅 衣 攻 胸 图 袖 攻 
XS 50 98 5 
S 51 102 56 
M 53 106 57 
L 55 110 58 


注意 : 因 测 曙 方 式 的 不 同 存在 1-2CM 的 误 美 ， 数 氛 仅 供 参考 ， 以 实物 为 准 . 


皮 灾 克文 2018 六 其 chic 吉 PUB 区 
韩 吾 各 时 放 机 村 小 世 夜 外 


村 小 或 衣 外 
*178.00 
和 


网 了 [ 瑟 丰 六 珊 检 20188 攻 关公 在 
人 铺 全 FL 于 卡 攻守 扣 箭 各 狐 学 生 


*108.00 
白玉 与 老 只 人 《 比 海 更 汪 》 放 蕊 


与 
四 了 风衣 
#188.00 


( 
BUYERS MUST READ 


和 与 < 只 人 4 基 外 江上 8 买 家 须知 ss 
ES 


图 6-2 ” 宝 页 推荐 模块 装修 后 的 效果 

*。 宝贝 排行 模块 : 可 以 给 买 家 起 到 流量 向 导 的 作用 ， 是 店铺 营销 以 及 打造 爆 款 的 必 备 
模块 ， 推 荐 方式 设置 可 以 选择 自动 推荐 或 者 手工 推荐 。 图 6-3 所 示 即 某 店铺 宝贝 排 
行 榜 模块 装修 后 效果 。 

。 默认 分 类 模块 : 将 店铺 的 宝贝 进行 归 类 设置 ， 可 添加 默认 分 类 模块 ， 并 在 类 目 中 将 
宝贝 按 销量 、 收 藏 、 价 格 、 新 品 进行 排列 ,便于 引导 买 家 按 类 别 选择 需要 的 宝贝 。 
该 模块 常用 于 宝贝 分 类 页 面 ， 也 就 是 二 级 页 面 中 ， 图 6-4 所 示 为 某 家 店铺 二 级 页 面 
中 的 宝贝 分 类 模块 装修 设置 后 的 样式 。 
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气质 女神 克 衣 服 秋 
¥162.00 


Wkk20lome 
日 

R67e3f 

宇 制 品质 车 秋装 女 
日 #375.00 

出 6363 件 

秋 内 光 吊 带 六 六 
日 ¥119.00 

始 E 壤 二 5981 件 


syn 


宝贝 分 类 
查看 所 有 宝贝 
抗 销量 按 新 品 按 价 格 换 kb 苇 
， 进 店 必 败 
新 品 上 力 
汤 贸 2 
逢 千 
2018.09.13 NEW 
2018.09.03 NEW 
2018.08.21 NEW 
2018.08.13 NEW 


。 宝 贝 搜 索 模 块 : 设置 搜索 的 关键 词 和 价格 区 间 ， 
图 6-5 所 示 为 某 店铺 
。 客 服 中 心 模块 : 页 头 、 
于 让 顾客 很 快 找到 并 咨询 宝贝 的 相关 信息 ， 


秋季 港 味 夏 古 温 条 风 休 亲 半 攻关 罗 中 


气质 女神 范 衣服 关 寡 有 
0 8 新 
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月 红 毛 衣 交 装 之 20185 革 于 鞭 放 0 
磺 松 百 指针 织 衫 马 申 背心 


有 六 式 豆 古 情 作 内 
亚 府 休 和 商检 内 指 衬 衫 女 
# 139.00 ”已 车; 4439 件 #149.00 ”已 舍 : 4223 件 


评论 (60) 评论 (94) 


员 蝴 兴 女 绅 版 学 生 裤子 女 夏 


1SHERRY|| 补 运 豆 骨 玩 专 拍 补 几 元 运费 拍 > 
LT 和“ 2019 和 家 下 本 虹 天 


攻 歌 亚 豆 色 气质 时 尚 上 不 
图 6-3 ”宝贝 排行 榜 模块 装修 后 的 效果 


所 有 宝贝 对 
尺码 : M(85) 5(76) 均 玛 (46) L(38) EVR26(37) EUR25(34) 局 更 多 
风格 : 通 动 (67) 韩 所 (39) 百 党 (37) 简约 (18) 
上 市 年 份 季 节 :2018 年 夏季 (72) 2018 年 秋季 (56) 


-S$ 
共 搜索 到 139 个 符合 条 件 的 丙 品 * 关键 字 : 价格 : 到 医治 | 


人 气 好 ”销量 凶 新品 六 ”价格 上 -页 | 下 -页 


衣 本 二 折 尖 台所 训 相 防 旺 祖 
3 


早秋 浪子 加 外 措 丙 


图 6-4 ， 宝 矶 分 类 模块 装修 后 的 效果 

以 便 买 家 搜索 整个 店铺 商品 ， 如 
宝贝 搜索 模块 装修 后 的 效果 。 

页 中 以 及 页 尾 处 一 般 都 需要 添加 店铺 的 客服 模块 ， 其 目的 在 
图 6-6 所 示 即 某 家 店铺 页 中 添加 的 客服 


模块 装修 后 的 效果 。 
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Square houlest18 秋 冬 韩版 学 院 风 宽 松 绣花 。 square houlest2018 秋 冬 新 款 休闲 情 懒 风 宽 。 ”square houlest 原 创 手工 小 方 包 笠 跨 OL 通 支 
¥ 估 机 影 迪 包 


连 帼 男女 秋冬 长 油 卫衣 松 加 绒 连 帽 纯 棉 卫衣 外 喜 亲情 人 腰包 手机 吴迪 | 
¥438.00 ¥398.00 ¥168.00 
已 告 : 10 件 已 售 : 5 件 已 售 : 44 件 
评论 (0) 评论 (0) 评论 (0) 


图 6-5 ”宝贝 搜索 


窜 乳 在 旦 时 间 : 09:00 AM - 24:00 PM 
生机 MOMNS 。 信 muzl 蝎 qanmo 的 mux 的 muex 的 huan 的 (ongd 的 tant 网 bb 的 ata 车 EAFTERSALES 多 maom 曙 投放 COMFLANT 昌 


HOTSALE 


TOp1 


HOT SALE 
/店铺 热 志 / 


图 6-6 客服 中 心 模块 装修 后 的 效果 
上 面 提 到 的 模块 中 ， 店 招 、 导 航 条 、 全 屏 海 报 、 产 品 促销 轮 播 海报 、 产 品 分 类 或 优惠 
券 展示 、 产 品 自 定 义 主 图 展示 、 店 铺 页 尾 以 及 店铺 背景 都 需要 美工 人 员 进 行 设计 ， 然 后 上 
传 至 相应 模块 。 其 他 小 模块 则 只 需 拖 奥 至 装修 页 面 ， 然 后 进行 相应 的 设置 ， 系 统 会 自动 展 
示 相 关内 容 。 


6.1.2 ”店铺 首页 布局 原则 


一 个 店铺 的 布局 好 坏 ， 直 接 影响 了 买 家 的 浏览 体验 的 好 坏 。 想 要 把 握 店铺 的 每 一 点 流 
量 ， 提 高 整体 流量 ， 网 店 布局 除了 要 根据 自己 的 店铺 风格 、 产 品 、 促 销 活动 分 门 别 类 地 进 
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行 清晰 、 完 整 的 布局 外 ， 还 要 求 讲究 整体 布局 的 合理 性 ， 使 浏览 者 享有 流畅 的 视觉 体验 。 
要 使 店铺 页 面 布局 合理 ， 需 要 遵守 以 下 原则 。 
。 主 次 分 了 明 ， 中 心 突出 : 视觉 中 心 一 般 在 屏幕 的 中 心 位 置 或 中 部 偏 上 的 位 置 。 将 店铺 
促销 信息 或 爆 款 等 重要 商品 安排 在 最 佳 的 视觉 位 置 ， 会 迅速 抓 住 买 家 眼球 。 在 视觉 
中 心 以 外 的 地 方 可 安排 稍微 次 要 的 内 容 ， 这 样 可 以 在 页 面 上 突出 重点 ， 做 到 主 次 有 
别 。 图 6-7 所 示 为 某 店铺 首页 的 部 分 布局 ， 从 图 中 可 以 看 到 视觉 中 心 为 主推 的 度假 
风 服 装 。 


回声 回 
ES 


[Ob 2 


1vYoDldo 汪 + 


开始 莹 上 时 尚之 让 


T3AvVAL YI3WWNS + 


| cucK FOR MORE> 


THE 
EDITORIALS 


FROM VERO MODA 


CUCK FOR MORE > 


图 6-7 中心 突出 
。 大 小 搭配 ， 相 互 呼应 : 展示 多 个 商品 时 ， 可 通过 大 小 搭配 的 方式 使 页 面 错落 有 致 ， 
如 图 6-8 所 示 。 


我 的 语 箱 


全 条 村 


畅想 强 动 美 观 > 时 商品 箱 


大 价 :-e689 
动 重 包 邮 价 


图 6-8 大 小 搭配 展示 
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。 区 域 划分 明确 : 合理 、 清 晰 的 分 区 可 以 引导 消费 者 快速 找到 自己 的 目标 商品 。 图 6-9 
所 示 为 宝贝 的 分 类 ， 买 家 可 以 根据 分 类 找到 所 需 的 商品 类 型 。 


沐浴 清洁 洗 发 护 发 “三 | 朋 芭 
ED A > 

i ”上 妆 百 变 范 和 “儿童 洗 护 

二 印 妆 小 清新 {a Ea Te” 洁净 有 魔法 
| CD 四: 


图 6-9 宝贝 分 类 


。 简洁 与 一 致 性 : 保持 页 面 简洁 与 一 致 性 是 网 页 布局 的 基础 , 例如 , 标题 要 醒目 , 页 面 、 
字体 搭配 得 当 ， 各 页 面 的 文本 、 商 品 的 间距 以 及 图 形 、 标 题 之 间 的 留 白 一 致 。 

。 合 理 使 用 页 面 元 素 : 页 面 元 素 的 选用 要 合理 、 精 确 ， 在 页 面 中 的 大 小 、 间 距 与 位 置 
要 合适 。 例如， 背景 图 案 生 动 、 页 面 文 本 无 错别字 且 可 读 性 强 等 。 

。 布局 丰满 : 布局 丰满 并 非 是 所 有 模块 的 简单 堆砌 ， 而 是 将 必要 的 模块 涵盖 全 面 。 除 
了 包含 产品 常规 模块 外 ， 页 面 还 包括 收藏 模块 、 客 服 模块 、 搜 索 模块 等 必 备 模块 ， 
以 增加 店铺 的 黏 性 ， 提 升 客户 的 忠实 度 ， 改 善 店 铺 的 用 户 体 验 。 


6.1.3 ”确定 首页 的 风格 与 色调 


店铺 出 售 的 商品 不 同 ， 装 修 的 风格 及 色调 就 会 有 很 大 差异 。 例 如 服装 类 的 店铺 ， 装 修 
风格 一 般 都 比较 华丽 ， 多 以 模特 图 片 为 主 ， 注 重 美观 性 ， 家 具 类 店铺 的 页 面 装修 ， 则 比较 
注重 物品 的 搭配 和 摆 放 ， 运 动 、 数 码 、 五 金 等 类 型 的 店铺 ， 则 更 注重 实用 性 和 功能 性 。 

例如 ， 图 6-10 为 ONLY 官方 旗舰 店 首页 。 从 图 中 可 以 看 出 这 家 店铺 从 商品 、 模 特 到 
店铺 装修 都 是 统一 的 欧美 风格 ， 更 容易 吸引 那些 喜欢 欧美 风格 的 时 尚 女性 。 

同样 是 购买 商品 ， 不 同 的 装修 风格 会 给 顾客 不 同 的 心理 暗示 。 例 如 ， 某 顾客 准备 购买 
几 件 日 常 穿 着 的 休闲 服饰 ， 如 果 进 入 到 一 家 装修 奢华 的 店铺 ， 顾 客 会 有 一 种 “ 进 错 门 ”的 
不 适 感 ， 或 者 产生 商品 价格 昂贵 的 错觉 。 因 此 ， 网 上 店铺 在 确定 自己 的 装修 风格 时 一 定 要 
贴近 自己 的 消费 群体 ， 了 解 面向 的 消费 群体 是 哪些 人 ， 他 们 的 喜好 和 顾虑 是 什么 ， 产 品 定 
位 是 什么 ， 经 过 这 几 方 面 的 综合 分 析 后 形成 自己 店铺 的 装修 风格 。 

本 书 所 有 案例 围绕 “大 魔 树 女装 店 ” 进 行 讲解 。 首 先 ， 其 主要 消费 群体 是 20 ~ 35 岁 
的 年 轻 女性 ， 该 店铺 装修 就 要 符合 年 轻 女性 的 审美 习惯 ， 色 彩 搭配 要 鲜 活 亮丽 。 其 次 ， 店 
铺 商品 定位 中 高 端 , 所 以 商品 图 片 一 定 要 精美 、 有 档次 。 最 后 , 要 统一 店铺 整体 装修 风格 ， 
装修 风格 应 适合 商品 风格 。 
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考 上 随和 系列 


家 最 系 到 新 癌 好 天才 区 


图 6-10 ” ”ONLY 官方 旗舰 店 首页 


6.1.4 ”搭建 首页 框架 


确定 店铺 的 风格 与 色调 后 ， 就 可 以 搭建 首页 框架 。 下 面 我 们 以 “大 魔 树 ” 女 装 店铺 为 
例 ， 详 细 讲解 搭建 首页 框架 的 步骤， 具体 如 下 。 

EE 登录 淘宝 账号 ， 进入 “卖家 中 心 "， 选 择 “ 店 铺 管理 ”一 “店铺 装修 ”进入 
旺 铺 装修 后 台 ， 如 图 6-11 所 示 。 

GE 在 图 6-12 所 示 店 铺 装修 后 台中 ， 选 择 “PC 端 ” 一 “基础 页 "。 然 后 将 鼠标 
放置 在 “首页 ”后 方 ， 选 择 “装修 页 面 ”进入 店铺 首页 装修 页 面 ， 如 图 6-3 所 示 。 
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医 
滞 板 。 主 由 详情 页 


诗风 列表 页 


[| 首页 20180817161528 
各 定义 页 
大 促 承接 页 店内 搜索 页 2018.0814153030 已 % 布 
门店 详情 页 


图 6-11 店铺 装修 后 各 


间 宇 旺 请 se 


[| es、 
"A 


图 6-12 页面 编辑 


单 击 “店铺 装修 ”页 面 顶端 的 “布局 管理 ”链接 :进入 “布局 管理 ”界面 ， 
如 图 6-13 所 示 


| 三 可 v | II 布 过 至 前 份 | 现 和 


后 二 而 
店 二 招牌 
9 
a 
sn 


自 定义 内 容 区 


后 


图 6-13 ”布局 管理 
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人 GE 选择 “图 片 轮 播 ” 模 块 , 单 击 模块 右 侧 的 甘 图 标 删除 该 栏目 ,如 图 6-14 所 示 。 
使 用 同样 的 方法 删除 其 他 不 需要 的 模块 。 


店铺 页 头 


图 6-14 ”删除 不 需要 的 模块 


在 左 侧 的 “模块 "列表 中 ,根据 需求 选择 需要 添加 的 单元 尺寸 ,此 处 选择 “950” 
选项 ， 如 图 6-15 所 示 。 


x 
选择 所 天 模块 ， 并 拖 动 至 想 应 位 置 (3) 


所 有 | 190 | 750 50 | 


图 6-15 选择 栏目 尺寸 


EB 在 左 侧 的 “模块 ”列表 中 选择 需要 添加 的 模块 ， 拖 入 到 新 建 的 布局 单元 中 ， 
释放 鼠标 后 ， 即 可 将 该 模块 添加 至 布局 中 ， 如 图 6-16 所 示 。 


图 6-16 添加 栏目 


EBB 使 用 相同 的 方法 编辑 页 面 中 的 模块 ， 完 成 首页 布局 后 的 效果 ， 如 图 6-17 
所 示 。 

EB》 当 需 要 使 用 淘宝 提供 的 宝贝 推荐 模块 时 ， 需 要 切换 回 “ 页 面 编辑 ”页 面 ， 
选择 “宝贝 推荐 ”模块 ， 单 击 柄 5 豆 按钮 打开 “宝贝 推荐 ”对 话 框 ， 在 “宝贝 设置 ” 选 
项 卡 中 可 根据 需要 设置 推荐 方式 、 人 气 指数 、 宝 贝 分 类 、 宝 贝 数量 等 参数 ， 如 图 6-18 
所 示 。 
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中 


图 6-17 首页 布局 效果 


您 可 以 通过 系统 自动 推荐 或 者 手动 选择 最 多 28 个 店铺 内 宝贝 ， 通 常 可 以 用 于 畅销 商品 、 最 新 上 加 的 商品 推荐 等 场景 全 使 用 部 助 
宝贝 设置 《电脑 端 显示 设置 
推荐 方式 : ”图 自动 推荐 司 手工 推荐 


自动 推荐 排序 : 。 人 气 指数 . 
宝贝 分 类 : 。 所 有 分 类 时 


图 6-18 宝贝 推荐 模块 设置 


切换 至 “电脑 端 显示 设置 ”选项 卡 ， 设 置 宝贝 展示 方式 ， 此 处 选择 展示 方式 
为 “一 行 展 示 3 个 宝贝 "， 单 击 “ 保 存 ” 按 钮 ， 如 图 6-19 所 示 。 

GE 完成 后 切换 至 “布局 管理 ”页 面 ， 即 可 看 到 店铺 首页 的 布局 设计 效果 ， 如 
图 6-20 所 示 。 
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您 可 以 通过 系统 自动 推荐 或 者 手动 选择 最 多 23 个 店铺 内 宝贝， 通常 可 以 用 于 畅销 商品 、 最 新 上 架 的 商品 推荐 等 场景 人 @ 使 用 帮助 


主 贝 设 置 | 电脑 痰 显示 设置 | 


显示 标题 : 三 示 


展示 方式 : 


辐 显示 “宝贝 推荐 


一 行 展示 4 个 宝贝 一 行 展 示 3 个 宝贝 一 行 无 句 展 示 3 个 宝贝 


是 否 显示 : ” 圈 折扣 价 


最 近 30 天 销 千 数 据 ” 辐 累计 评价 数 辐 评论 


取消 


自 定义 内 容 区 e 一 一 一 一 一 一 一 


0.2 


图 6-19 设置 宝贝 展示 方式 


图 6-20 布局 后 的 效果 


PC 端 首 页 设计 与 制作 


淘宝 网 网 店 首页 的 美观 度 直接 影响 销量 和 顾客 对 店铺 的 印象 。 网 店主 要 由 店 招 、 导 航 


栏 、 分 类 模块 、 轮 播 图 、 


页 尾 模块 等 组 成 ， 每 个 模块 的 作用 和 使 用 方法 都 不 相同 。 下 面 对 
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各 个 模块 的 设计 与 制作 方法 分 别 进行 介绍 。 


6.2.1 首页 店 招 的 设计 与 制作 


店 招 是 店铺 的 招牌 和 象征 ， 位 于 店铺 页 面 的 顶端 ， 好 的 店 招 能 突出 店铺 风格 ， 提 高 店 
铺 的 美观 度 和 推广 度 。 设 计 店 招 时 若 能 根据 自己 店铺 的 特点 搭配 ， 制 作出 风格 独特 、 吸 引 
力 强 的 店 招 ， 对 提高 店铺 转化 率 和 排名 等 都 非常 有 利 。 下 面 介 绍 店 招 的 设计 原则 、 风 格 选 
择 及 店 招 制作 方法 。 


1. 店 招 的 设计 原则 

为 了 推广 店铺 时 使 店 招 便于 记忆 , 除了 需要 在 设计 上 具有 新 颖 别致 、 易 于 传播 的 特点 ， 
还 应 遵循 两 个 原则 : 一 是 在 店 招 中 放置 自己 的 品牌 形象 ， 即 店铺 名 称 或 店铺 标志 ; 二 是 抓 
住 产品 定位 ， 也 就 是 展示 店铺 产品 ， 让 买 家 清楚 直观 地 看 出 店铺 出 售 的 是 什么 商品 。 如 
图 6-21 所 示 为 两 种 店 招 的 对 比 图 


小 亿 家 原创 女 包 


人 公告 :欢迎 光 虱 本 店 ， 本 店 商 品 一 律 服 低 价 ， 不 议价 


1 
wa Pe 
ES > 
(OSE) ne -4 a NS 
,Se 关注 店铺 BOSS 吓人 从 大 家 更 ‘ 和 
1 而 | 
首页 包 品牌 故事 


NEW 莉 流 新 品 


图 6-21 两 种 店 标 对 比 
两 家 店铺 都 是 女 包 店铺 ， 第 一 家 店铺 的 店 招 通过 放大 “小 亿 原 创 女 包 ”文案 的 方式 ， 
在 店 招 中 放置 了 品牌 形象 ; 而 第 二 家 店铺 的 店 招 并 未 出 现 “ 女 包 ”类 的 文案 ， 却 通过 放置 
店铺 产品 的 方式 实现 了 产品 定位 ， 不 仅 让 买 家 直观 地 看 到 店铺 卖 的 什么 产品 ， 还 让 买 家 了 
解 产品 的 大 致 样式 ， 从 而 准确 判断 是 否 适合 自己 
2. 店 招 的 风格 选择 


店 招 风格 引导 着 店铺 的 风格 ， 而 店铺 风格 很 大 程度 上 取决 于 店铺 所 经 营 的 产品 。 一 般 
来 说 ， 一 个 完整 的 店铺 要 求 店 招 、 产 品 、 店 铺 风 格 具 有 统一 性 。 


3. 店 招 的 设计 要 求 
在 进行 店 招 设计 时 ， 为 了 使 店 招 完美 地 展现 在 店铺 首页 ， 需 要 按照 店 招 的 制作 规范 进 


行 制作 。 店 招 主要 分 为 常规 店 招 和 通栏 店 招 两 类 , 这 两 种 类 型 店 招 的 大 小 和 尺寸 都 不 相同 ， 
下 面 以 淘宝 网 为 例 进 行 介 绍 。 
。 常 规 店 招 : 常规 店 招 是 指 旺 铺 专业 版 店 招 。 该 店 招 的 宽度 尺寸 为 950 像素 ， 高 度 尺 
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寸 不 超过 120 像素 ， 可 以 上 传 GE 、JPG、JPEG 和 PNG 四 种 图 片 格式 。 

。 通 栏 店 招 : 通栏 店 招 是 指 淘宝 中 常用 的 店 招 类 型 ， 通 栏 店 招 包括 页 头 背 景 、 常 
规 店 招 和 导航 条 。 该 店 招 的 尺寸 要 求 是 1920 像素 x 150 像素 ， 其 大 小 不 可 超过 
200KB。 

常规 店 招 与 通栏 店 招 的 区 别 在 于 : 常规 店 招 在 上 传 至 店铺 页 面 后 ， 店 招 两 侧 为 白色 空 

白 显示 ， 如 图 6-22 所 示 。 通 栏 店 招 在 上 传 至 店铺 页 面 后 ， 店 招 两 端 会 根据 设计 的 效果 进 
行 显示 ， 如 图 6-23 所 示 。 


Holiland | sam ee i 
好 利索 | ww | DE 芝士 
闫 邮 价 : ¥ 58 尖刀 价 : ¥ 78 
图 6-22 ”常规 店 招 
Holiland i 年 et Wanen > 泛 光 
好 利 来 @ we 和 生生 人 
外 到 m。 生 提醒 全 (分 尘 。。。 演 轩 时 象 。。 要 各 (主因 》。。 六 济州 各 。 可 妆 忆 晶 。 中 软 月 洒 
图 6-23 ”通栏 店 招 
4. 常规 店 招 的 制作 


本 案例 基于 “大 魔 树 ”女装 店 的 店 招 进行 设计 ， 首 先 要 确定 店 招 的 色调 。 由 于 “大 魔 
树 ”女装 的 Logo 颜色 为 粉色 和 紫色 搭配 ， 且 为 了 更 好 地 体现 女装 店 特色 ， 这 里 继续 采用 
粉色 和 紫色 搭配 制作 背景 ， 然 后 添加 文案 及 素材 ， 图 6-24 所 示 即 设计 后 的 常规 店 招 ， 具 
体操 作 步 又 如 下 。 


优雅 襄 


图 6-24 ”常规 店 招 设计 效果 


EE 打开 Photoshop CS6 软 件 ,新 建 一 个 “宽度 "为 950 像 素 “ 高 度 " 为 120 像 素 “ 分 
辨 率 ” 为 72 像素 /英寸 的 文件 ,并 命名 为 “常规 店 招 ”, 如 图 6-25 所 示 。 将 背景 填充 为 “ 紫 
色 ”(R:58, G:37,，B:75 )。 

EB 依次 按 Alt 一 V 一 E 键 ,在 弹出 的 “新 建 参考 线 ” 对 话 框 中 选中 “水 平 ” 单 
选 框 ,“ 位 置 ” 参 数 设置 为 10， 在 画布 水 平方 向 10 像素 的 位 置 创建 参考 线 ， 按 此 方法 再 
在 画布 水 平方 向 的 940 像素 处 创建 参考 线 ， 如 图 6-26 所 示 。 

GH》 单 击 “新建 图 层 ” 按钮 国 浙 建 图 层 ,将 其 命名 为 “渐变 图 层 ”, 如 图 6-27 所 示 。 

人 GE 在 工具 栏 中 选择 “渐变 工具 ”按钮 国 ， 并 在 选项 栏 单 击 “ 线 性 渐变 ”按钮 
回 , 单 击 “渐变 编辑 器 ”国峰 ,在 弹出 的 “渐变 编辑 器 ” 对话 框 中 设置 参数 ,如 图 6-28 
所 示 。 
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名 称 (NN): 
预 设 人 ): 自 定 


宽度 (W): 
高 度 (H): 
分 辨 车 (R): 
颜色 模式 (M): 
背景 内 容 (C): 


人 高 级 
颜色 配置 文件 (9): sRGB IEC61966-2.1 
像素 长 席 比 (X): 方形 像素 


图 6-25 ”新 建文 档 


图 6-26 ”给 制 参考 线 


图 6-27 ” 重 命 名 图 居 


sno 


渐变 类 型 (T); 实 底 ~ 


平滑 度 (M): 100 % 


| 
自 <— R:224 G:72 B:156 
色 标 


图 6-28 ”渐变 参数 
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在 画布 外 侧 单 击 确定 渐变 起 点 ， 按 住 Shift 键 向 右 移动 鼠标 再 次 单 击 以 确定 


渐变 终点 ， 如 图 6-29 所 示 ， 对 应 效果 如 图 6-30 所 示 。 右 侧 渐变 也 按 此 方法 绘制 ， 效 果 如 


图 6-29 拉 直 线 


图 6-30 单 侧 渐 变 效 果 


充 为 白色 ， 


图 6-31 渐变 效果 图 


选择 “和 矩形 工具 ” 园 ， 绘 制 一 个 大 小 为 144 像素 x 65 像素 的 矩形 ， 将 其 填 
调整 位 置 如 图 6-32 所 示 


图 6-32 ”给 制 窍 形 


绘制 一 个 大 小 为 8 像素 的 正方 形 , 命名 为 “三 角 边 "， 并 按 Ctrl+T 组 合 键 对 


该 矩形 进行 旋转 45 度 操作 ， 如 图 6-33 所 示 ， 按 Enter 键 确认 操作 


Step8. 


形 移动 到 合适 


选择 “直接 选择 工具 ” 国 ， 选 中 该 矩形 最 上 方 的 锚 点 进行 移动 ， 并 将 该 矩 
位 置 ， 如 图 6-34 所 示 。 
选中 “三 角 边 ” 图 层 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 栅 格 化 图 层 ” 选 


项 ， 按 Ctrl+AltrT 组 合 键 进行 平移 ,平移 到 合适 的 距离 ， 如 图 6-35 所 示 。 按 Enter 键 确定 


操作 。 


145 


NR 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


图 6-33 ”旋转 45 度 图 6-34 ”移动 销 点 


= 


图 6-35 平移 


GE 拉 ctrltshifttrAlt+T 组 合 键 对 三 角 边 进 行 多 次 复制 ， 选 中 “三 角 边 ”图 层 以 
及 所 有 三 角 边 复制 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 。 
SS3 按 Ctrl+T 组 合 键 后 对 三 角 边 图 层 进 行 等 比 缩放 ， 如 图 6-36 所 示 ， 调 整 之 后 
效果 如 图 6-37 所 示 。 选 中 “和 矩形 1” 和 三 角 边 所 在 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 并 命 
名 为 “logo 底座 ”。 


bn PYYYYYYYYY' sd 
图 6-36 ”调整 大 涉 


图 6-37 ”调整 完成 
置 人 “大 魔 树 女 装 logo.png” 素 材 ， 将 其 缩放 至 合适 大 小 ， 如 图 6-38 所 示 。 


图 6-38 ” 置 入 Logo 
EE》 选择 “ 横 排 文字 工具 ” 国 ， 在 空白 区 域 输入 文本 “优雅 "， 设 置 字体 为 “ 张 
海山 锐 线 体 简 ”、 大 小 为 “58 像素 "， 按 CtrlHEnter 组 合 键 结束 输入 。 使 用 相同 方法 输入 划 
他 文本 ， 大 小 及 颜色 如 图 6-39 所 示 。 
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SEY》 选择 “矩形 工具 ” 国 ， 绘 制 一 个 大 小 为 60 像素 x 16 像素 的 矩形 ， 填 充 为 
“黄色 ”( R:255，G:198, B:0), 将 该 图 层 重 命名 为 “黄色 点 级 ”, 将 其 放置 在 “夏季 新 品 ” 
图 层 的 下 方 ， 图 层 位 置 及 效果 图 如 图 6-40 所 示 。 


优雅 新 总 


优雅 新 Ri 


图 6-39 输入 文本 图 6-40 图 层 什 置 ( 左 ) 及 效果 图 ( 右 ) 
GE 选中 “优雅 "“ 新 风尚 ”“2018 夏季 新 品 ” 和 “黄色 点 级 ”图 层 ， 按 Ctrl+G 
组 合 键 将 选中 图 层 进行 编组 。 
置信 素材 文件 “衣服 jpg” 和 “裤子 jpg”, 将 其 放置 在 合适 位 置 , 如 图 6-41 


所 示 。 


图 6-41 置 入 衣服 素材 


置 人 素材 文件 “收藏 店铺 .png"， 并 将 其 放置 在 合适 位 置 ， 按 Ctrlt; 组 合 键 
隐藏 标尺 。 至 此 ， 常 规 店 招 制作 完成 ， 效 果 图 如 图 6-24 所 示 。 最 后 将 文件 保存 至 指定 文 
件 夹 内 。 

S. 通栏 店 招 的 制作 

通栏 店 招 的 制作 主要 基于 常规 店 招 进行 设计 , 不 过 通栏 店 招 的 上 传 需要 分 为 三 步 进行 ， 
才能 展现 一 个 完整 的 店 招 ， 所 以 需要 将 通栏 店 招 保存 为 三 部 分 ， 即 页 头 背 景 、 通 栏 店 招 基 
础 部 分 和 导航 条 背景 。 图 6-42 所 示 即 通栏 店 招 需要 上 传 的 三 个 部 分 。 


3 页 头 背 景 


D 通 栏 店 招 基础 部 分 
人 


优雅 "人 四 


3 导航 条 背景 
图 6-42 ”通栏 店 招 上 传 划 分 
通栏 店 招 和 常规 店 招 的 制作 方法 相同 ,只 不 过 通栏 店 招 的 尺寸 为 1920 像 素 x 150 像素 。 
为 了 更 能 体现 常规 店 招 和 通栏 店 招 的 区 别 ， 这 里 在 常规 店 招 的 基础 上 制作 通栏 店 招 ， 制 作 
时 需要 常规 店 招 另 存 为 “通栏 店 招 "， 将 画布 扩充 至 1920 像素 x 150 像素 。 
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GE 打开 “常规 店 招 psd" 文件 , 按 Ctrl+Shift+S 组 合 键 将 文件 另存 至 指定 文件 夹 ， 
并 重 命名 为 “通栏 店 招 ”。 

GER 按 CtltAltiC 组 合 键 打 开 “ 画 布 大 小 ”对 话 框 ,在 该 对 话 框 设置 画布 “宽度 ” 
为 1920 像素 ,“ 高 度 ” 为 150 像素 ， 如 图 6-43 所 示 。 


一 = | | 


宽度 : 1920 像素 
高 度 : 150 像素 
一 新 建 大 小 : 843.8K 一 一 -一 
宽度 (W):| 1920 M 
曲 想 寺 (R) 
定位 : | 所 


图 6-43 ”修改 画布 尺寸 


EH》 将 背景 图 层 填 充 为 “紫色 ”(R:58，G:37，B:75 )， 如 图 6-44 所 示 。 选 中 渐 
变 图 层 ， 按 CtrltT 组 合 键 将 选中 图 层 进 行 拉 伸 ， 如 图 6-45 所 示 


图 6-45 拉 伸 渐变 
人 GZ 单 击 图 层面 板 下 方 的 “创建 新 组 ”按钮 用 站, 命名 为 “导航 栏 ”。 
G33》 远 择 “矩形 工具 ” 国 ， 在 选项 栏 中 设置 填充 颜色 为 粉色 (R:238，G:106， 
B:137 )、 描 边 为 “无 ”, 绘制 一 个 大 小 为 1920 像素 x 30 像素 的 矩形 , 将 其 放置 在 页 面 下 方 ， 
如 图 6-46 所 示 。 将 该 图 层 重 命名 为 “导航 条 ”。 


图 6-46 ”给 制导 航 条 
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图 层 样 式 参数 如 图 6-47 ~ 图 6-49 所 示 。 效 果 图 如 图 6-50 所 示 。 


新 建 样式 (W)… 
TV) 


图 6-47 设置 图 居 样 式 之 一 


图 6-48 ”设置 图 居 样 式 之 一 


添加 
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图 6-49 ”设置 图 居 样 式 之 三 


图 6-50 ”效果 图 


GED 选择 “ 模 排 文字 工具 " 图, 在 选项 栏 设 置 文 本 参数 : 设置 字体 为 “微软 雅 黑 ”、 
大 小 为 “18 像素 "、 设 置 消除 锯齿 的 方法 为 “锐利 "， 在 导航 条 区 域 依次 输入 如 图 6-51 所 
示 的 文本 。 


os 反 藏 
居 站 六 往 ， 全 


夏季 上 新 搭配 套餐 时 尚 T 恤 个 性 裤子 唯美 裙 装 明星 同 款 | 


图 6-51 输入 文本 
人 ES 按 cul+; 组 合 键 隐藏 标尺 ， 至 此 通栏 店 招 制 作 完成 ， 效 果 图 如 图 6-52 所 示 。 


图 6-52 ”通栏 店 招 效果 图 


人 GE》 隐藏 文字 图 层 ， 如 图 6-53 所 示 。 按 Ctrl+Alt+Shift+S 组 合 键 保存 为 gif 格式 
至 指定 文件 夹 。 
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图 6-53 ”保存 页 头 背 盎 
选择 “矩形 选择 工具 ” 国 ， 在 两 条 参考 线 中 间 绘 制 一 个 950 像素 x 120 
像素 的 矩形 选区 ， 依 次 按 Alt 一 I 一 P 键 对 选中 区 域 进行 裁剪 ， 效 果 如 图 6-54 所 示 ， 按 
Ctrl+Altt+Shift+S 组 合 键 保存 为 gf 格式 至 指定 文件 夹 。 


图 6-54” 裁 前 默认 店 招 


GE 按照 step10 的 方法 ， 再 保存 一 个 尺寸 为 950 像素 x 30 像素 的 导航 条 ， 如 
图 6-55 所 示 。 


图 6-55 ” 截 切 导航 条 


及 总 
为 了 确保 通栏 店 招 的 完整 性 ， 保 存 店 招 时 需要 保存 三 种 尺寸 图 片 广 
件 以 配合 综 加 使 用 。 


6.2.2 ”首页 分 类 导航 的 设计 与 制作 


分 类 导航 是 引导 买 家 购买 的 重要 模块 ， 系 统 自 带 的 分 类 导航 模块 只 能 通过 文本 的 方 
式 显 示 ， 比 较 单 一 。 为 了 将 商品 分 类 的 作用 发 挥 到 极致 ， 卖 家 可 以 将 店铺 装修 风格 设计 成 
横向 分 类 模块 ， 提 升 买 家 购买 体验 。 本 案例 针对 “大 魔 树 ” 女 装 店铺 制作 一 款 太 十 为 950 
像素 x 200 像素 的 横向 分 类 导航 ， 有 具体 操作 步骤 如 下 。 

了 打开 Photoshop CS6 软件 ,新建 一 个 “宽度 ”为 950 像素 “高度 ”为 200 像素 、 
“分 辨 率 ”为 72 像素 /英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “分 类 导航 模块 "。 
人 GE 依次 在 画布 的 垂直 方向 的 10 像素 处 和 940 像素 处 创建 参考 线 ,如 图 6-56 所 示 。 


图 6-56 创建 参考 线 
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人 二 关 工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


GE》 置信 “搭配 套餐 png”“ 时 尚 T 恤 png”“ 个 性 裤子 .png”“ 唯 美 裙 装 png”“ 明 
星 同 款 png”“ 背 心 吊带 png”“ 卫 衣 /外套 png” 等 素材 文件 ， 并 调整 大 小 ， 如 图 6-57 
所 示 。 


图 6-57 置 入 素材 


人 GEZ9 选中 所 有 素材 图 层 ， 分 别 单 击 “ 水 平 居中 分 布 ”按钮 圈 和 “垂直 居中 对 齐 ” 
按钮 图 ,将 素材 图 层 进行 对 齐 操作 。 效 果 如 图 6-58 所 示 


图 6-58 ”对齐 素材 图 居 
GE 选择 “ 横 排 文字 工具 ” 国 ， 分 别 输入 导航 文本 ， 设 置 字体 为 “微软 雅 黑 ”、 大 
小 为 “14 像素 "、 颜 色 填 充 为 “黑色 ”、 设 置 消除 锯齿 的 方法 为 “锐利 "， 并 分 别 单 击 “水 平 
居中 分 布 ”按钮 转 和 “垂直 居中 对 齐 ” 按 馈 图, 使 文字 与 文字 之 间 排 列 整齐 ,如 图 6-59 所 示 ， 


图 6-59 ”输入 导航 文本 


GED》 选择 “ 算 形 工具 ” 国 ， 在 “搭配 套餐 ”下 方 绘制 一 个 大 小 及 样式 如 图 6-60 
所 示 的 矩形 , 在 上 方 输入 文本 “Click in >”, 文本 字体 为 “微软 雅 黑 ”, 大 小 及 颜色 如 图 6-61 
所 示 。 

EE 选中 “click in >” 文 本 图 层 和 “和 抢 形 ”图 层 ， 按 Ctrl+G 组 合 键 进行 编组 ， 
将 该 组 重 命名 为 “ 单 击 进 入 按钮 ” 

人 SEE 拉 cul+J 组合 键 6 次 , 复制 “ 单 击 进 入 按钮 ”图 层 组 ， 依 次 选中 对 应 图 层 组 
按 Shift 平行 移动 并 调整 其 位 置 。 至 此 ， 分 类 导航 模块 制作 完成 ， 效 果 如 图 6-62 所 示 。 
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拱 配 套餐 拱 配 套餐 
图 6-60 ”绘制 按钮 图 6-61 输入 文本 
et et Te ee oe om Be 


[CEis [Er 


图 6-62 分 类 导航 模块 


6.2.3 ”大 型 海报 轮 播 图 的 设计 与 制作 


大 型 海报 轮 播 图 是 网 店 的 重要 模块 ， 它 的 作用 就 是 在 同一 区 域 中 通过 多 张 图 片 切换 的 
方式 进行 展示 播放 ， 从 而 达到 使 用 最 少 的 模块 来 展示 更 多 商品 或 促销 信息 的 功能 。 下 面 介 
绍 大 型 海报 轮 播 图 的 设计 与 制作 技巧 。 


1. 不 同 轮 播 图 片 的 尺寸 要 求 
轮 播 图 的 尺寸 是 由 店铺 布局 决定 的 ， 与 店 招 一 样 ， 卖 家 可 根据 需求 设置 常规 轮 播 效 果 
和 全 屏 轮 播 效果 两 种 样式 。 
。 常 规 轮 播 图 尺寸 : 常规 轮 播 图 的 高 度 要 求 为 100 像素 ~ 600 像素 ， 宽 度 则 分 为 950 
像素 、750 像素 ( 右 侧 轮 播 图 )、190 像素 ( 左 侧 轮 播 图 ) 3 种 ， 如 图 6-63 所 示 ， 体 
积 要 求 小 于 300KB。 
。 全 屏 轮 播 图 尺寸 : 全 屏 轮 播 图 片 的 宽度 是 1920 像素 ， 高 度 一 般 以 400 像素 ~ 800 
像素 为 最 佳 ， 如 图 6-64 所 示 。 但 该 轮 播 效 果 需 要 通过 购买 第 三 方 模块 进行 装修 
展示 。 


2. 轮 播 图 片 的 视觉 设计 要 点 


轮 播 图 是 多 张 海 报 图 循环 播放 组 成 的 效果 图 ， 要 使 轮 播 图 美观 、 吸 引 买 家 注意 ， 就 要 
对 每 张 海 报 图 的 主题 、 构 图 、 色 彩 等 视觉 要 点 进行 综合 考虑 。 
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人 用 二 关 工 设计 实 操 , 配色 、 布 局 、 修 图 、 装 修 


IE 
EE 


点 击 收藏 不 断 上 新 


190 像 素 上 750 像 素 


图 6-63 ”常规 轮 播 图 尺 十 


MOUSSY x milies 


。 跨 界 联名 款 首发 


FASHION JOINT RELEASE 


| 1920 像 素 | 


图 6-64 全屏 轮 播 图 尺寸 
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合 主题 

无 论 是 新 品 上 市 还 是 店铺 促销 活动 ,海报 中 都 需要 围绕 一 个 主题 进行 设计 ， 并 确定 对 
应 的 轮 播 图 效果 。 一 般 情 况 下 ,海报 主题 通过 产品 和 文字 描述 来 体现 ， 将 描述 提炼 成 简洁 
的 文案 ， 并 将 主题 放 在 海报 的 第 一 视觉 点 ， 让 买 家 直观 地 看 到 产品 或 活动 。 要 根据 产品 和 
活动 选择 合适 的 背景 。 在 编辑 文案 时 ， 文 案 的 字体 不 要 超过 3 种 ， 建 议 使 用 稍 大 的 或 个 性 
文字 突出 活动 内 容 或 产品 特色 ， 如 图 6-65 所 示 。 


七 多 节 - 全 环 来 电 


春 夏 折扣 季 


包 邮 满 减 不 只 <“ 折 


舌 动 时 间 8.12-8.18 


图 6-65 ”主题 海报 效果 


白 构图 
常见 的 banner 图 布局 形式 有 三 种 :“ 右 图 左 字 " 构 图 “ 左 图 右 字 "构图 “两 边 图 中 间 字 ” 
构图 ,分 别 如 图 6-66 ~ 图 6-68 所 示 。 具体 的 构图 方式 选择 可 以 根据 宝贝 特点 以 及 文案 决定 。 


海报 标题 海报 标题 
模特 展示 图 模特 展示 图 
宝贝 展示 图 宝贝 展示 图 
文案/ 利益 点 文案 /利益 点 


图 6-66 banner 图 “ 右 图 左 字 ”布局 形式 图 6-67” ”banner 图 “ 左 图 布 字 ”构图 形式 


| 海报 标题 | 


模特 图 模特 图 
宝贝 图 宝贝 图 


[ 文 家 /和 益 点 ] 


图 6-68 ” banner 图 “两 边 图 中 间 字 ”构图 形式 


自 色彩 
海报 设计 不 但 需要 考虑 主题 和 构图 ， 还 需要 使 其 色调 统一 。 在 配色 时 ， 卖 家 要 对 重要 


155 


NAN 
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的 文字 信息 用 突出 醒目 的 颜色 进行 强调 ， 通 过 明暗 对 比 以 及 不 同 颜色 的 搭配 来 确定 对 应 的 
风格 ， 其 背景 颜色 尽量 不 要 使 用 过 多 的 颜色 ， 以 免 页 面 杂 乱 。 图 6-69 为 一 张 配色 较 好 的 
海报 。 


为 您 打造 现代 慰 


2000ml 大 容量 


图 6-69 色彩 搭配 示例 


3. 轮 播 图 片 的 制作 


了 解 了 轮 播 图 片 的 尺寸 要 求 和 设计 要 点 ， 下 面 针对 “大 魔 树 ”女装 店铺 首页 制作 两 种 
不 同 尺 寸 的 轮 播 图 ， 具 体操 作 如 下 。 


合 全 屏 轮 播 图 制作 


全 屏 轮 播 图 是 一 种 可 以 覆盖 整个 屏幕 并 轮流 播放 海报 的 模块 , 具有 高 端 、 大 气 的 特点 。 
本 案例 采用 1920 像素 x 750 像素 尺寸 来 制作 “大 魔 树 ” 女 装 店铺 首页 的 全 屏 轮 播 图 ， 构 
图 采用 “ 左 图 右 字 ”的 形式 ， 制 作 后 的 效果 图 如 图 6-70 所 示 。 其 具体 操作 步骤 如 下 。 


图 6-70 全屏 轮 播 图 


打开 Photoshop CS6 软件 ,新 建 一 个 “宽度 ”为 1920 像素 “高 度 ” 为 750 像素 、 
“分 辨 率 ” 为 72 像素 /英寸 “背景 内 容 ” 为 白色 的 文件 ,并 命名 为 “全 屏 轮 播 图 ” ,如 图 6-71 
所 示 。 
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颜色 模式 (M):; RGB 颜色 ”~ 
背景 内 容 (QO); 白色 


人 高 级 


像素 长 宽 比 (X): 方形 像素 


颜色 配置 文件 (9): 工作 中 的 RGB: sRGB IEC6196... ~ 


图 6-71 


新 建文 档 


分 别 在 画布 的 垂直 方向 的 360 像素 和 1560 像素 的 位 置 绘制 两 条 参考 线 ， 如 


图 6-72 所 示 。 


图 6-72 


给 制 参考 线 


GB》 置信 素材 文件 “全 屏 轮 播 图 背景 素材 jpg"， 如 图 6-73 所 示 。 


图 6-73 


置 入 素材 


GE 选择 “ 延 形 工具 "” 国 , 在 右 侧 参 考 线 处 绘制 一 个 大 小 为 306 像素 x 557 像素 、 
颜色 填充 为 “粉色 ”( RR:230,G:104,B:132 ) 的 矩形 ， 如 图 6-74 所 示 。 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


图 6-74 绘制 桃红 色 矩 形 
GE 先 择 “ 横 排 文 字 工 具 ” 国 ， 在 图 像 中 分 别 输入 “FASHION” 和 “-STYLE”， 
打开 “字符 ”选项 卡 设置 参数 ， 具 体 设置 如 图 6-75 所 示 。 将 文本 贴近 右 侧 参考 线 。 效 果 
如 图 6-76 所 示 。 


图 6-75 设置 文本 参数 


图 6-76 输入 文本 


ES》 选择 “ 横 排 文字 工具 ”加 ,在 “STYLE” 下 方 80 像素 处 输入 文本 “/ 夏季 
出 游 季 人， 字体 设置 为 “方正 兰亭 黑 简 体 ”、 大 小 为 “38 像素 ”、 字 体 颜色 为 “白色 "。 剩 
余 文 本 按 此 方法 依次 输入 ， 大 小 及 颜色 如 图 6-77 所 示 。 
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图 6-77 输入 文本 


EH 在 桃红 色 和 矩形 下 方 14 像素 处 绘制 水 平 参 考 线 ， 选 择 “ 和 矩形 工具 ” 国 ， 绘 制 
一 个 大 小 为 450 像素 x 46 像素 的 矩形 , 并 将 其 不 透明 度 改 为 “60%”, 效果 如 图 6-78 所 示 。 


图 6-78 ”给 制 新 参考 线 
人 ES 在 黄色 透明 矩形 图 层 的 上 方 输入 横 排 文本 。 至 此 ， 全 屏 轮 播 图 制作 完成 ， 效 
果 如 图 6-70 所 示 。 
外 常规 轮 播 图 制作 
本 案例 采用 950 像素 x 500 像素 尺寸 来 制作 “大 魔 树 ” 女 装 店铺 首页 的 常规 轮 播 图 ， 
构图 采用 “ 右 图 左 字 ”的 形式 ， 制 作 后 的 效果 如 图 6-79 所 示 ， 其 具体 操作 步骤 如 下 。 


新 品 上 市 


夏季 女 要 曾 我 区 这 松 贡 古 闪 币 辣 蜂 委 体 尖 攻 要 


js 人 592.00 


图 6-79 常规 轮 播 图 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


ES》 打开 Photoshop CS6 软件 ,新 建 一 个 “宽度 " 为 950 像素 “高 度 " 为 500 像素 、 
“分 辩 率 ”为 72 像素 /英寸 “背景 内 容 ” 为 白色 的 文件 ,并 命名 为 “常规 轮 播 图 ” ,如 图 6-80 
所 示 。 


_ 聘 除 预 设 (D)..。 」 


颜色 模式 (M): RGB 颜色 vv 8 位 
背景 内 容 (QO: 白色 


人 高 =2E= 
颜色 配置 文件 (Q): 工作 中 的 RGB: sRGB IEC6196... ~ 
像素 长 宽 比 (X): 方形 像素 ~ 


图 6-80 ”新 建文 档 
人 GE 将 背景 填充 为 “灰色 ”( 了 R:234，G:234，B:234 )， 置 入 如 图 6-81 所 示 的 素 
材 文件 “常规 轮 播 图 - 树叶 .png” 和 “模特 .png”， 按 Enter 键 确 定 操作 ， 并 调整 位 置 ， 如 
图 6-82 所 示 。 


图 6-81 选择 素材 图 片 


人 ES 依次 复制 “树叶 ”图 层 和 “模特 ”图 层 ,并 将 其 重 命名 为 “树叶 投影 ”和 “ 模 
特 投影 "。 

人 ES 将 鼠标 放置 在 “树叶 投影 ”图 层 缩 览 图 上 , 按 住 Ctrl 键 单 击 , 为 “树叶 投影 ” 
创建 选区 ， 如 图 6-83 所 示 。 
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图 6-82 置 入 素材 


图 6-83 ”创建 选区 
在 工具 栏 选中 “ 算 形 选 框 工具 " 国 , 在 选区 上 右 击 , 在 弹出 的 对 话 框 中 选择 “ 调 
整 边缘 ”选项 ， 调 整 羽化 参数 为 “2 像素 ” 
将 选区 填充 为 “黑色 "、 将 其 不 透明 度 改 为 “20%"， 移 动 投 影 到 合适 位 置 ， 
并 将 该 图 层 放置 在 “树叶 ”图 层 下 方 ;“ 模 特 投影 ”也 按 此 方法 进行 。 效 果 如 图 6-84 所 示 。 


图 6-84 为 素材 添加 投影 
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人 二 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


EE 选择 “和 矩形 工具 ” 贺 ， 在 模特 图 层 下 方 绘制 一 个 大 小 为 590 像素 x 434 像 
素 的 白色 矩形 。 

EY》 再 绘制 一 个 大 小 为 550 像素 x 396 像素 的 矩形 ,填充 为 "灰色 (及 :234,G:234， 
B:234 )、 描 边 为 “2 像素 "、 描 边 颜色 为 “灰色 ”( 及 :201，G:201，B:201 )， 如 图 6-85 
所 示 。 


图 6-85 ”给 制 矩 形 


人 EBD》 选中 两 个 矩形 图 层 ， 在 选项 栏 依次 单 击 “ 垂 直 居中 对 齐 ” 按 钮 国 和 “水 平 
居中 对 齐 ”按钮 图 对 两 个 矩形 进行 居中 对 齐 操作 ， 如 图 6-86 所 示 


图 6-86 ”排列 矩形 


按 CtrlHHT 组 合 键 , 调 出 定 界 框 ， 当 出 现 旋转 稍 头 国 时 ， 按 住 Shift 键 将 其 旋 
转 45 度 ， 如 图 6-87 所 示 。 按 Enter 键 确定 此 步 操作 ， 并 调整 位 置 ， 按 Ctrl+G 组 合 键 对 两 
个 矩形 进行 编组 ， 并 命名 为 “文案 框 ”。 

ES 选择 “ 模 排 文 字 工 具 ” 国 ， 在 文本 框 内 输入 “新 品 上 市 ”"， 设 置 字体 为 “ 宋 
体 ”、 大 小 为 “46 像素 ”、 颜 色 为 “绿色 ”( R:51, G:114, B:4),。 完 成 后 依次 输入 其 余 文 本 ， 
字体 为 “微软 雅 黑 ”"， 大 小 及 颜色 如 图 6-88 所 示 。 
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图 6-87 ”旋转 矩形 


新 品 上 市 


村 要 女装 新 灼 主 加 更 队员 夺 烛 硬 攻 是 拓 做 同 长 了 


六 299 克 70/ 六 499 减 50/ 江 899 确 100 


把 # 人 ti: 592.00 


SALE 


图 6-88 输入 文本 
SS 选择 “ 自 定义 形状 工具 ” 国 ， 在 选项 栏 中 选择 形状 国 导 导 ， 在 “新 品 上 市 ” 
左 侧 绘制 一 个 箭头 形状 ; 选择 “直线 工具 " 国 , 在 画布 中 英文 文本 下 方 绘制 一 条 长 度 为 “162 
像素 ”的 直线 ， 效果 如 图 6-89 所 示 


> 新品 上 市 
pep 
1 才 儿 swu 全 康 


图 6-89 ”添加 装饰 


163 


ODN 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


绘制 一 个 大 小 为 343 像素 x 32 像素 的 矩形 ， 将 其 放置 在 “ 满 299 减 20…” 
文本 图 层 的 下 方 ， 并 将 “ 满 减 ” 文 本 的 颜色 改 为 “白色 "， 如 图 6-90 所 示 。 

按 CtlJ 组 合 键 复制 绿色 和 矩形 图 层 ， 按 Ctrl+T 组 合 键 ， 在 弹出 的 定 界 框 上 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 “变形 ”选项 ， 拖 遇 定 界 角 点 及 边 点 进行 变形 ， 如 图 6-91 


所 示 。 


图 6-90 ”添加 矩形 图 6-91 变形 


人 GS》 选中 “和 矩 形 3 副本 ”图 层 将 其 放 在 “和 矩形 3” 图 层 的 下 方 ， 并 对 该 图 
栅 格 化 操作 。 
EF 为 “ 算 形 3 副本 ”图 层 创建 选区 ， 将 其 填充 为 “黑色 ”。 运 用 橡皮 擦 工具 擦 
际 边 衣 ， 如 图 6-92 所 示 。 
3 选择 “模糊 工具 ” 国 , 在 选项 栏 设 置 笔 刷 大 小 为 “20 像素 ”强度 为 “50%”， 
在 “ 站 形 3 副本 ”图 层 进行 涂抹 ， 并 设置 不 透明 度 为 “55%”。 效 果 如 图 6-93 所 示 。 


戎 299 减 20/ 满 499 减 5 


图 6-92 橡皮 擦 擦 除 廊 角 图 6-93 模糊 


EB》 置信 素材 文件 “鲜花 .png”, 按照 Step3 ~ Step6 的 方法 制作 投影 效果 。 至 此 ， 
常规 轮 播 图 制作 完成 ， 效 果 如 图 6-79 所 示 。 


6.2.4 ”优惠 券 的 设计 与 制作 


店铺 优惠 券 是 淘宝 店铺 常用 的 促销 手段 ,也 是 吸引 消费 者 二 次 消费 的 策略 。 下 面 以 “大 
魔 树 ”上 店铺 优惠 券 为 例 ， 要 求 在 优惠 券 中 突出 商家 优惠 力度 和 优惠 券 使 用 条 件 ， 设 计 一 款 
满 减 形式 的 优惠 券 ， 如 满 88 减 10、 满 198 减 20 等 。 优 惠 券 的 尺寸 没有 具体 要 求 ， 通 常 
根据 版 心 的 宽度 进行 制作 。 下 面 以 宽度 为 950 像素 进行 制作 ， 制 作 后 的 优惠 券 效 果 图 如 


图 6-94 所 示 。 其 操作 步 又 如 下 。 


图 6-94 ”优惠 券 效果 


GE》 打开 Photoshop CS6 软件 ,新 建 一 个 “宽度 " 为 950 像素 “高 度 " 为 240 像素 、 
“分 辩 率 ”为 72 像素 /英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “优惠 券 "。 

EE 选择 “和 矩 形 工具 ” 国 , 在 选项 栏 中 设置 “填充 ”为 无 “ 描 边 ”粗细 为 2 像素 、 
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描 边 颜色 为 “粉色 ”(R:233，G:72，B:116 )， 在 画布 中 绘制 一 个 大 小 为 186 像素 x 117 
像素 的 矩形 。 选 择 “ 横 排 文 字 工具 ” 苹 在 上 方 输入 相关 文本 ,字体 分 别 为 “Impact” 和 “ 微 
软 雅 黑 "， 大 小 及 颜色 如 图 6-95 所 示 。 

ES》 远 插 “ 垂 形 工具 ” 国 , 绘制 一 个 如 图 6-96 ( 左 图 ) 所 示 的 矩形 ， 并 在 矩形 
中 输入 “立即 领取 >” 文本 ,字体 为 “Adobe 黑体 Std” ,大 小 及 颜色 如 图 6-96 ( 右 图 ) 所 示 。 


9 6 
¥w 
用 
图 6-95 输入 文本 图 6-96 ”绘制 矩形 并 输入 文本 
GZ 远 择 “椭圆 工具 ” 国 ， 在 矩形 左上 角 按 住 Shift 键 绘制 一 个 正 圆 形 ， 并 在 上 
方 输入 相关 文本 ， 为 图 像 添加 装饰 ， 如 图 6-97 所 示 。 


GE》 选中 除 背 景 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 对 选中 图 层 进行 编组 ， 并 命名 
为 “无 门槛 减 5”"， 如 图 6-98 所 示 。 


图 6-97 ”添加 装饰 图 6-98 ”图 居 编 组 


GB》 按 cul+] 组 合 键 对 “无 门槛 减 5” 图 层 组 进行 复制 ， 并 修改 对 应 文本 ,将 图 
层 组 分 别 命名 为 “ 满 88-10”“ 满 158-15” 和 “ 满 238-20"。 选 中 所 有 组 , 单 击 选项 栏 中 的 “水 
平 居中 分 布 ”按钮 国 将 图 层 平均 分 布 ， 最 终 效果 如 图 6-94 所 示 。 


6.2.5 ”商品 自 定义 展示 模块 的 设计 与 制作 


商品 自 定义 展示 模块 是 商家 为 了 推广 店铺 主打 宝贝 而 设计 的 模块 ， 该 模块 的 样式 类 似 
于 宝贝 列表 ,包括 宝贝 展示 、 价 格 展示 等 ,可 放置 在 首页 商品 列表 之 上 ,图 6-99 所 示 即 为 “大 
魔 树 ”女装 店铺 首页 的 商品 自 定义 展示 模块 ， 其 具体 操作 方法 如 下 。 

GE》 打开 Photoshop CS6 软件 ,新 建 一 个 “宽度 "为 950 像素 “高 度 " 为 1752 像素 、 
“分 辩 率 ”为 72 像素 /英寸 “背景 内 容 ” 为 白色 的 文件 ,并 命名 为 “商品 自 定义 展 示 模 块 ”， 
如 图 6-100 所 示 。 
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名 称 (N): 商品 自 定义 展示 模块 
三 预 设 (P): 自 定 本 


大 小 (I) 
宽度 (W): 950 
高 度 (H): 1752 
分 辨 硅 (R): 72 
颜色 模式 (M): RGB 颜色 ”~ 
背景 内 容 (CO): 白色 


人 高 级 


颜色 配置 文件 (0): 工作 中 的 RGB: sRGB 正 C6196.… ~ 
像素 长 宽 比 X): 方形 你 素 ~ 


图 6-100 ”新 建文 档 
加 在 画布 584 像素 和 1168 像素 的 位 置 创建 水 平 参考 线 ， 再 在 475 像素 位 置 创 
建 垂 直 参 考 线 ， 如 图 6-101 所 示 。 
人 GE》 选择 “矩形 工具 " 国 , 在 选项 栏 设置 颜色 “填充 ” 为 无 “ 描 边 ”粗细 为 1 像素 、 
描 边 颜 色 为 紫色 (R:58，G:37，B:75 )。 绘制 一 个 大 小 为 950 像素 x 538 像素 的 矩形 ,将 
其 放置 在 合适 位 置 ， 如 图 6-102 所 示 。 


166 


第 6 章 | 快速 制作 店铺 首页 


图 6-101 ”绘制 参考 线 图 6-102 绘制 矩 形 
人 GE 在 选项 栏 中 单 击 “ 路 径 操 作 ” 按 钮 国 ， 在 下 拉 菜 单 中 选择 “ 减 去 顶层 形状 ” 
选项 ， 在 如 图 6-103 ( 左 图 ) 所 示 红 框 位 置 绘制 一 个 矩形 ， 在 选项 栏 单 击 “ 路 径 操作 ” 按 
钮 国 , 在 下 拉 菜 单 中 选择 “合并 形状 组 件 ” 选 项 , 拼合 矩形 ,效果 如 图 6-103 ( 右 图 ) 所 示 ， 


图 6-103 ” 减 去 顶层 形状 


选择 “ 横 排 文字 工具 ” 国 给 入 01， 设 置 字体 为 “时 尚 中 黑 简体 ”、 字 体 大 小 
为 “75 像素 ”"、 颜 色 为 “紫色 ”( R:58，G:37，B:75 )， 如 图 6-104 所 示 。 

EF》 选中 除 背 景 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 对 选中 图 层 进行 编组 ， 并 将 其 
重 命名 为 01 ， 如 图 6-105 所 示 。 


101 


图 6-104 输入 文本 图 6-105 ”图 层 编 组 
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EB 选中 01 图 层 组 ， 按 两 次 CtrlJ 组 合 键 复 制图 层 组 ， 分 别 对 其 命名 为 02 和 
03， 依 次 选中 02 和 03 图 层 组 将 其 移动 到 合适 位 置 ， 并 修改 数字 文本 ， 如 图 6-106 所 示 。 
EH》 选择 “矩形 工具 ” 国 ， 绘 制 三 个 矩形 ( 此 时 不 需要 关注 矩形 的 颜色 )， 如 


图 6-107 所 示 。 


0) 


国 


03 


图 6-106 复制 图 层 图 6-107 ”绘制 矩 形 


人 SS 置信 如 图 6-108 所 示 的 素材 图 片 , 并 将 素材 图 层 放置 在 对 应 的 矩形 图 层 上 方 
如 图 6-109 所 示 。 依 次 选中 素材 图 片 按 Ctrl+AltrG 组 合 键 为 每 个 素材 图 层 创 建 剪 切 蒙 版 。 


效果 如 图 6-110 所 示 。 
一 一 Lei 

ee -一 一 一 一 一 一 一 一 一 一 一 
组 织 ” 。 包 会 到 库 中 ”共享 ” 。 放 觅 幻灯 片 ” 国 同 
时 “ 

池 二 EA 问 的 人生 sl 

a 匡 国电 

wa 冷 并 网 02 

回国 

国 要 元 

关 迅 要 下 载 = 

中 名 了 1 

页 计算 机 

多 tsa (cj 

刁 软 件 (D 

[P12] 

8 人 5 妆 


图 6-108 ”选择 素材 图 片 
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0 


图 6-109 置 入 素材 图 6-110 效果 图 


SE 选择 “ 横 排 文字 工具 ” 苹 ， 在 空白 区 域 输入 如 图 6-111 所 示 的 文本 ,设置 
字体 为 “ 张 海 山 锐 线 体 简 ” 字体 大 小 为 “28 像素 ”、 颜 色 为 “紫色 ”( R:58, G:37, B:75 )。 


上 一 


图 6-111 输入 文本 
选择 “矩形 工具 ” 贰 ,绘制 一 个 大 小 为 138 像素 x 52 像素 的 矩形 ， 在 矩形 
上 方 输入 文本 ,设置 字体 为 “黑体 "， 样 式 、 大 小 及 颜色 如 图 6-112 所 示 。 


清 痢 连衣裙 
Y98 


图 6-112 输入 商品 价格 标签 


GH》 按照 step8 ~ Step11 的 方法 制作 剩余 模块 ， 效 果 如 图 6-99 所 示 。 至 此 ， 商 品 
自 定义 模块 制作 完成 ， 将 其 保存 到 指定 文件 夹 内 。 


6.2.6 ”页 尾 模 块 的 设计 与 制作 


页 尾 模 块 位 于 店铺 首页 的 最 底部 ， 是 页 面 装修 的 最 后 一 个 环节 ， 也 是 很 多 卖家 在 装修 
时 容易 忽略 的 部 分 。 但 是 页 尾部 分 作为 店铺 首页 的 组 成 部 分 ， 卖家 应 该 充分 地 利用 起 来 ， 
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贾 


更 多 地 展示 店铺 信息 ， 以 获取 买 家 信任 。 下 面 对 页 尾 模块 的 设计 要 点 以 及 制作 方法 进行 


常见 的 页 尾 模块 类 型 


店铺 页 尾 是 一 个 不 可 忽视 的 地 方 ， 页 尾 模块 可 以 在 所 有 页 面 显示 。 页 尾部 分 可 以 添加 
的 内 容 有 很 多 ， 如 发 货 /物流 /售后 须知 、 无 线 端 店铺 二 维 码 、 微 淘 二 维 码 、 收 藏 按钮 、 
店铺 活动 等 

。 在 页 尾 模 块 添加 客服 中 心 ， 如 果 买 家 浏览 到 最 后 ， 想 要 咨询 卖家 ， 可 以 直接 单 击 客 
j 咨 询 , 既 方便 又 简洁 ; 在 页 尾 模块 添加 “发 货 /物流 /售后 须知 
到 页 尾部 分 提示 的 内 容 时 ， 则 会 给 买 家 一 种 专业 、 有 保障 的 感觉 
到 闫 灾 的 格 本 如 图 6-113 所 示 


， 容 易 获 


客服 中 心 : 果 果 全 往往 杖 枢 全 图 图 @@ 咕 中 名。 工作 时 间 : AM9.30-PM12.00 节 假日 另行 通知 


快递 选择 发 货 时 间 售后 处 理 


购物 保障 
本 店 黔 认 中 通 快递 ， 加 急 顺丰 怖 周一 至 周 日 16: 00 前 付款 订单 本 店 支持 7 天 无 理由 退货 , 收 到 本 店 已 加 入 消 保 ， 所 有 商品 
补差 价 ， 暂 不 支持 其 他 快递 当日 发 出 衣物 震 有 问题 请 您 有 8 联系 宫 服 100% 实 拍 ， 请 您 冰心 购买 


店铺 首页 | 所 有 宝贝 | 收藏 本 店 | 我 89 订单 | 购 攀 车 | 亚 回 顶部 


图 6-113 页 尾 放 置 “ 发 货 /物流 / 征 后 须知 ”示例 


。 在 页 尾 模块 添加 无 线 端 店铺 - 维 码 ,方便 买 家 使 用 无 线 端 浏览 店铺 ， 
并 且 还 能 及 时 推送 店铺 消息 ， 增 加 客户 群体 ， 如 图 6-114 所 示 
温 声 提 示 快递 说 明 
壤 页 本 全 从 组 


本 店 默 认 图 通 快递 ， 天 天 快递 ) 
本 藏 港澳 台 


图 6-114 页 尾 放 置 二 维 码 示例 


。 在 页 尾 模块 增加 “返回 顶部 /返回 首页 ”按钮 ， 方 便 顾客 浏览 ， 给 顾客 带 来 更 好 的 
用 户 体验 ， 如 图 6-115 所 示 


所 有 宝贝 


图 6-115 ”页 尾 放置 “返回 顶部 /返回 首页 ”按钮 示例 
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。 在 页 尾 模块 放置 “收藏 ”按钮 ,起 到 再 次 提醒 顾客 收藏 店铺 的 作用 ,如 图 6-116 所 示 。 


WOMEN MEN NEWIN FEATRUS ”PRESS 。 ABOUTUS MEMBERS 


收藏 我 们 BOOKMARK 


全 旺 请 最 人 这 


图 6-116 页 尾 放置 “收藏 ”按钮 示例 
。 在 页 尾 模块 放置 “店铺 产品 活动 模块 "， 可 以 增加 店铺 活动 曝光 量 , 方便 顾客 直接 
到 达 活 动 区 选 购 商 品 ， 如 图 6-117 所 示 


羽绒 服 | 会场。 毛 昵 外 夺 | 会 场 毛衣 /针织 衫 1 双 场 
ED ED ETD Eh pi pi we bd Be 


图 6-117 ”页 尾 放 置 “ 店 铺 产品 活动 模块 ”示例 
。 在 店铺 页 尾 模块 放置 分 类 导航 信息 ， 可 以 提高 买 家 的 购买 率 ， 如 图 6-118 所 示 ， 


#About gukoo 


Helto Kitty 专 区 


色差 由 于 接近 相 4 快递 “合作 包间: 中 运 和 EM 家 换 货 尖 定 时 间 册 


图 6-118 页 尾 放 置 导航 信息 
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页 尾 模块 可 以 作为 买 家 访问 店铺 的 快速 通道 ， 合 理 地 设置 页 尾 信息 可 以 方便 买 家 
从 页 尾 模块 跳 至 首页 分 类 信息 页 面 ， 查 看 店铺 的 其 他 产品 及 信息 。 因 此 ， 提 供 清晰 的 页 
尾 模块 能 够 保证 更 多 的 店铺 页 面 被 访问 ， 使 更 多 的 商品 被 发 现 ， 极 大 地 提高 店铺 的 转 
化 率 。 


2. 制作 并 装修 页 尾 

下 面 以 “大 魔 树 ” 女 装 店铺 为 例 ， 根 据 商 家 给 的 文案 设计 一 款 简 洁 的 页 尾 模块 。 为 了 
方便 用 户 浏览 以 及 及 时 推送 信息 ， 本 案例 页 尾 中 主要 放置 发 货 /物流 /售后 须知 、 二 维 码 
等 内 容 ， 颜 色 选 用 百 搭 的 黑色 。 

打开 Photoshop CS6 软件 ,新 建 一 个 “宽度 ”为 950 像素 “高 度 ” 为 200 像素 、 
“分 辨 率 ”为 72 像素 /英寸 的 文件 ， 并 命名 为 “页 尾 ”"， 如 图 6-119 所 示 。 


WD: 丙 同 | EE 
厂 “天 ): 自 定 -| 取消 
KD): [ -| [ERG) =] 
宽度 (W): 950 像素 |_ 遇 际 预 设 (D)..… 
高 度 (H): 200 像素 bd 
分 养 率 (B): 72 人 于 搞 二 ~ 
颜色 模式 (M): RGB 颜色 ~ 8 位 ~ 
痛 景 内 容 (Q: 白色 > 让 让 
党 高 级 556.6K 
图 6-119 新 建文 件 


GE 依次 置信 如 图 6-120 所 示 的 素材 文件 “相机 png“ 物流 .png” 无 忧 售后 .png”， 
并 调整 位 置 ， 如 图 6-121 所 示 。 


组 织 包 会 到 库 中 ” 共享” 放 逻 纪 灯 片 。 ”新建 文件 夫 Cy 


国 闻 
图 迅 于 下 载 
一 LL 易 dr EL 
加 :入 
于 计算 机 二 区 司 要 闪 文 室 tt 


ta (CC) 
5 软件 (D3) 
电台 


Ge 


出 4 个 对 象 


图 6-120 ”选择 素材 图 片 


3 打开 素材 文件 “页 尾 模块 文案 .txt” ,如 图 6-122 所 示 , 复 制 相关 文本 。 选 择 “ 横 
排 文字 工具 ” 苹 ， 在 画布 中 粘贴 文本 ， 字 体 及 样式 效果 如 图 6-123 所 示 。 
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图 6-121 置 入 素材 


LI 
文件 (月 ” 奖 独 (E) 眉 式 (O) 查看 (V) 帮助 (H) 


欠 ， ne de 下 A. | 让 


图 6-122 ”文本 素材 展示 


同 实物 拍摄 @ 发 货 /物流 加 售后 服务 


均 为 摄影 屈 实 物 拍摄 ， 由 于 泊 提 光 本 店 默 认 使 用 前 达 快 递 ，EMS/ 硕 风 收 到 货物 后 如 有 质量 问题 ， 请 7 天 

线 问题 ,宝贝 图 片 与 实际 宝贝 产生 请 补足 邮费 ，PM16 点 前 付款 当天 发 内 联系 售后 服务 。 产 品质 量 问题 ， 
定 色差 色差 已 减 至 最 小 ,以 实 货 PM16 点 后 /星期 日 次 日 发 货 ! 本 店 承担 来 回 运费 ， 

物 为 准 。 


图 6-123 ”输入 文本 


选择 “直线 工具 ”图 在 水 平 参 考 线 下 方 按 住 Shift 键 绘制 一 条 宽度 为 “772 
像素 ”"、 填 充 颜色 为 “灰色 ”( R:149，G:149，B:149 ) 的 直线 ， 如 图 6-124 所 示 。 


辕 实物 拍摄 扣发 从 /物流 加 售后 服务 


约 为 摄影 栅 实 物 拍摄 ， 由 于 拍摄 光 本 店 默 认 使 月 韵 达 快递 ,EMS/ 顺 风 收 到 贷 物 后 如 有 质量 问题 ， 请 7 天 
绪 问题 ,宝贝 图 片 与 实际 宝贝 产生 请 补足 邮费 。PM16 点 前 付款 当天 发 。 ”内 联系 售后 服务 。 产 品质 量 问 题 ， 


一 定 色差 。 色 差 已 减 至 最 小 , 以 实 货 PM16 点 后 /星期 日 次 日 发 货 ! 本 店 承担 来 加 运费。 
物 为 准 。 


图 6-124 ”绘制 直线 


GE 按照 Step4 的 方法 在 图 像 上 绘制 高 度 为 “61 像素 ”、 描 边 颜 色 为 “灰色 "( R:149， 
G:149，B:149 )、 描 边 粗细 为 “2 像素 ”、 形 状 描 边 类 型 为 “虚线 ”的 虚线 。 选 择 的 虚线 
样式 如 图 6-125 所 示 。 复 制 虚线 ， 效 果 图 如 图 6-126 所 示 。 
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图 6-125 ”描记 类 型 样式 


团 实物 拍摄 6 发 货 /物流 加 售后 服务 


均 为 押 影 屈 实 物 拍摄 ， 由 于 拍摄 光 本 让 默认 使 用 韵 达 快递 ，EMS/ 有 顺风 收 到 货物 后 如 有 质量 问题 ， 请 7 天 
线 问 题 ， 宝贝 图 片 与 实际 宝贝 产生 请 补足 邮费 。PM15 点 前 天 发 内 联系 售后 服务 。 产 品质 量 问题 
一 定 色差 色差 已 减 至 最 小 ， 以 实 货 PM16 点 后 /星期 日 次 日 发 货 ! 本 店 承 担 来 回 运费 。 

物 为 准 . 


图 6-126 ”给 制 庶 线 


EB》 选择 “矩形 工具 " 本 在 选项 栏 设置 填充 颜色 为 “黑色 ”、 描 边 为 “无 "， 
在 如 图 6-127 所 示 的 位 置 绘制 一 个 “宽度 ”为 950 像素 、“ 高 度 ” 为 30 像素 的 矩形 ， 


回 实物 失当 外 发烧 /物流 


为 为 攀 你 物 拍档 ， 由 于 担 所 光 本 店庆 认 使 用 乔 达 快递 , EMS/ 荐 风 | 履 旨 人物 后 如 有 夯 量 问题 ， 请 7 天 
网 问题 ， 宗 由 图片 与 文 际 宝 贝 产生 许 足 邮 竹 ，pPM16 占 前 付款 当天 发 | 内 联 务 。 产 品 耐量 问题 
定 色 差 。 色 关 已 大 于 以 区 贷 PM16 点 后 /星期 日 次 日 发 货 ! 本 店 录 担 来 加 运费. 

物 为 准 . 


图 6-127 ”绘制 矩形 


GET 选择 “ 横 排 文字 工具 ” 
大 小 为 “14 像素 


输入 相关 文本 ， 设 置 字体 为 “微软 雅 黑 ”、 字 体 
` 字 体 颜 色 为 “白色 ”、 字 符 的 间距 设置 为 “200%” ,效果 如 图 6-128 所 示 


图 6-128 ”输入 文本 


EB》 置 人 “一 维 码 png" 素 材 , 将 其 放置 在 合适 位 置 ,并 在 下 方 输入 相关 文本 。 至 此 ， 
页 尾 制 作 完 成 ， 效 果 如 图 6-129 所 示 。 


回 实物 拍摄 @ 发 货 /物流 转 售后 服务 回 
均 为 摄影 覆 实 物 拍摄 ， 由 于 拍摄 光 本 店 默 认 使 用 前 达 快递 ，EMS/ 三 风 收 到 货物 后 如 有 质量 问题 ， 请 7 天 (sl 
线 问题 ,宝贝 图 片 与 : 请 补足 邮费 。PM16 点 前 付款 当天 发 内 联系 售后 服务 。 产 品质 量 问题 , 回 : 

一 定 色差 . 他 关 已 大 到 最小 以 安 货 PM16 点 后 /星期 日 次 日 发 货 ! 本 店 承 担 来 回 运费 。 

物 为 准 . 


图 6-129 ”页 尾 效果 图 
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6.3 ”无线 端 首页 设计 与 制作 


随 着 移动 互联 网 的 快速 发 展 以 及 智能 手机 的 普及 ， 越 来 越 多 的 网 民 喜 欢 用 手机 上 网 购 
物 ， 网 络 购物 向 移动 端 转 移 的 趋势 进一步 凸现 。 无 线 端 无 论 在 店铺 流量 还 是 成 交 额 等 方面 
都 占据 着 非常 重要 的 位 置 。 在 这 种 趋势 下 ， 无 线 端 店铺 装修 就 显得 十 分 重要 。 本 节 主 要 介 
绍 无 线 端 首页 设计 与 装修 的 相关 内 容 。 


6.3.1 无 线 端 首页 模块 介绍 


无 线 端 首页 装修 的 原理 与 PC 端 装修 原理 基本 相同 ， 但 装修 布局 的 模块 有 一 些 不 同 ， 
且 页 面 展示 更 精简 。 图 6-130 所 示 为 某 淘宝 店铺 PC 端 与 无 线 端 页 面 的 对 比 。 


oo 区 
一 9 


热 才 新昌 


(a) PC 端 页 面 (b) 无 线 端 页 面 


图 6-130 ”PC 庙 店 铺 首 页 与 无 线 端 店铺 首页 对 比 
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通过 图 6-131 可 以 看 出 ， 无 线 端 店铺 首页 一 般 分 三 部 分 ， 顶 部 主要 包括 店铺 招牌 、 搜 
索 栏 .导航 栏 ,中 间 部 分 主要 为 商品 及 促销 活动 展示 区 ,页面 底 部 包括 店铺 Logo、 全 部 宝贝 、 
店铺 微 淘 、 宝 贝 分 类 以 及 联系 客服 。 


ll 4G 17:58 


好 利 来 官方 旗舰 店 D 


店铺 招牌 


搜索 栏 QQY 搜 索 ] 首页 ”宝贝 新 品 活动 


心 桥 竟 舞 爱 在 好 利 来 


时 间 : 8 月 12 日 -8 月 17 日 


商品 及 促销 
活动 展示 区 


图 6-131 无 线 端 店铺 首页 模块 布局 

无 线 端 首页 顶部 的 店铺 招牌 导航 栏 、 搜 索 栏 是 固定 模块 ， 中 间 部 分 为 自由 设计 组 合 区 
域 , 可 以 直接 将 需要 的 模块 拖 忠 至 该 区 域 ， 底 部 的 内 容 只 需要 在 后 台 进行 设置 ， 具体 介 绍 
如 下 。 

。 店 铺 招 牌 : 无 线 端 店 招 与 PC 端 不 同 ， 无 线 端 店 招 无 法 展 

示 过 多 信息 ， 所 以 选择 一 张 符合 店铺 风格 的 简单 图 片 即 

可 ， 店 招 中 不 需要 包含 文字 ， 如 图 6-132 所 示 。 

。 搜 索 栏 : 搜索 栏 主要 提供 店铺 宝贝 搜索 功能 ， 如 顾客 不 想 

通过 导航 查找 商品 ， 可 以 直接 在 搜索 栏 输入 关键 字 搜 索 2 

相关 商品 。 图 6-132 ”店铺 招牌 示例 
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。 导航 栏 : 导航 栏 可 以 放置 首页 、 宝 贝 、 新 品 、 人 合辑、 活动、 会员 以 及 买 家 秀 等 内 容 。 
。 店 铺 Logo: 不 同 于 PC 端 店铺 首页 Logo 位 置 ,无 线 端 Logo 位 置 放置 在 首页 左下 角 。 
。 全 部 宝贝 : 买 家 可 通过 单 击 “ 全 部 宝贝 ”链接 ， 查 看 店铺 中 所 有 商品 。 

。 店 铺 微 淘 : 微 淘 是 在 现 有 的 店铺 和 宝贝 之 上 构建 的 一 个 信息 层 , 用 户 可 订阅 和 分 享 ， 
而 不 是 只 能 看 到 运营 推荐 的 内 容 。 简 单 地 说 就 是 卖家 在 微 淘 上 面 开通 账号 ， 通 过 发 
送信 息 让 自己 的 粉丝 看 到 。 粉 丝 会 关注 自己 喜欢 的 账号 ， 看 到 卖家 发 送 的 信息 。 

。 宝 贝 分 类 : 宝贝 分 类 就 是 对 店铺 内 的 商品 进行 分 类 ， 方 便 买 家 进行 查找 。 

。 联 系 客服 : 买 家 对 商品 有 疑问 时 ， 可 通过 该 链接 与 客服 在 线 即时 沟通 。 

。 商品 及 促销 活动 展示 区 : 除 上 述 模块 外 ， 还 可 以 在 无 线 端 首页 放置 优惠 券 、 轮 播 图 、 
分 类 导航 、 宝 贝 列 表 等 模块 。 


6.3.2 无 线 端 首页 模块 的 设计 与 制作 


无 线 端 店铺 首页 布局 及 尺寸 与 PC 端 店铺 首页 的 是 不 同 的 ， 但 风格 需要 保持 一 致 ， 所 
以 在 装修 无 线 端 首页 时 ， 需 要 依据 PC 端 首页 风格 及 布局 ， 对 无 线 端 首页 中 的 主要 模块 进 
行 设 计 。 无 线 端 首页 模块 的 设计 与 制作 主要 包括 以 下 几 方面 。 


1. 无 线 端 店 招 的 制作 


无 线 端的 店 招 尺 寸 为 750 像素 x 580 像素 。 当 用 户 向 下 拖 忠 网 页 时 ， 店 招 背 景 图 片 呈 
渐变 显示 。 此 时 ， 需 要 选择 一 张 没有 文字 的 背景 图 片 ， 将 其 做 成 店 招 模块 尺寸 ， 图 6-133 
所 示 即 为 “大 魔 树 ” 的 店 招 背景 图 。 


图 6-133 无线 端 店 招 


2. 无 线 端 轮 播 图 的 制作 


无 线 端 轮 播 图 与 PC 端的 轮 播 图 一 样 ， 都 用 于 店铺 活动 宣传 。 无 线 端 轮 播 图 的 尺寸 建 
议 “ 宽 度 ” 为 750 像素 、“ 高 度 ” 为 200 像素 ~ 900 像素 。 无 线 轮 播 图 制作 分 为 两 种 方法 ， 


Erg 


RRR NN 


店 美工 设计 实 操 , 配色 、 布 局 、 修 图 、 装 修 


第 一 种 是 由 店铺 美工 自己 制作 ， 第 二 种 则 是 为 了 节省 时 间 成 本 由 PC 端 适 配 为 无 线 端 ， 如 
图 6-134 和 图 6-135 所 示 即 为 PC 端 和 无 线 端 轮 播 图 适 配 前 后 效果 图 。 


图 6-135 无 线 端 轮 播 图 


3. 无线 端 优惠 券 的 制作 


无 线 端 的 优惠 券 和 PC 端的 优惠 券 类 似 ， 80 像 素 
但 无 线 端 需要 把 每 张 优惠 券 独立 上 传 , 其 上 : 
传 尺 寸 需要 店铺 美工 自行 定义 。 在 淘宝 的 自 党 
定义 模块 编辑 器 中 ， 每 个 方 格 的 尺寸 为 80 像 

素 x 80 像素 ， 如 图 6-136 所 示 ， 且 美工 只 能 
绘制 出 80 像素 倍率 的 图 片 框 ， 这 就 要 求 上 传 

的 图 片 尺寸 是 80 像素 的 倍数 ， 本 案例 根据 

240 像素 x 160 像素 尺寸 进行 图 片 适 配 ， 具 
体操 作 如 下 。 

GE 打开 Photoshop CS6 软件 ， 新 
建 一 个 “宽度 ”为 240 像素 、“ 高 度 ” 为 160 
像素 、“ 分 辩 率 ”为 72 像素 /英寸 “背景 内 
容 ” 为 白色 的 文件 , 并 命名 为 “无 门槛 减 5”， 图 6-136” 自 定义 模块 编辑 器 部 分 截图 
如 图 6-137 所 示 。 
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名 称 (N): 无 门槛 咸 5 
预 设 (P): 自 定 


存储 预 设 (5).… 


宽度 (W): 归队 预 设 (D 


高 度 (H): 
分 辨 车 (R): 
颜色 模式 (M): 
容 (C): 
背景 内 容 (C): 图 乱 大 小 
和 高 级 112.5K 
颜色 配置 文件 (0): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 


图 6-137 ”新建 文档 
GE 使 用 Photoshop CS6 软件 打开 素材 文件 “优惠 券 psd"， 如 图 6-138 所 示 ， 


图 6-138 打开 素材 文件 


GE 在 “无 门槛 减 5$” 图 层 组 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 “复制 组 ”选项 ， 
如 图 6-139 所 示 

人 GZ 切换 到 无 线 端 适 配 文档 中 ， 选 中 “背景 ”图 层 和 “无 门槛 减 5” 图 层 组 ， 依 
次 单 击 选项 栏 中 的 “垂直 居中 对 齐 ” 按 钮 国 和 “水 平 居中 对 齐 ” 按 钮 图 ， 将 图 层 组 居中 对 
齐 ， 如 图 6-140 所 示 。 
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复制 : 无 门槛 碱 5 
为 (A): 无 门 覆 咸 5 


目标 


图 6-139 ”参数 设置 图 6-140 ”居中 对 齐 


和 按 CtrlrshifttAlt+s 组 合 键 ， 在 弹出 的 “存储 为 Web 所 用 格式 ”面板 中 设置 
“优化 的 文件 格式 ”为 “png 24”"， 如 图 6-141 所 示 ， 单 击 “ 存 储 ” 按 钮 ， 将 其 存储 为 png 
格式 的 文件 至 指定 文件 夹 内 。 


图 6-141 存储 为 Web 所 用 格式 
BY》 按 Step3 ~ step5 的 方法 制作 并 保存 其 余 优惠 券 ,至 此 ,无 线 端 优惠 券 制作 完成 。 


4. 无 线 端 商品 自 定义 展示 模块 的 制作 

无 线 端的 商品 自 定义 展示 模块 和 PC 端 类 似 ， 但 无 线 端 需要 把 单个 商品 的 模块 独立 上 
传 。 和 优惠 券 模块 一 样 ， 其 上 传 尺寸 需要 店铺 美工 自行 定义 ， 上 传 的 图 片 尺寸 是 80 像素 
的 倍数 。 本 案例 根据 640 像素 x 400 像素 尺寸 进行 图 片 适 配 ， 具 体操 作 如 下 。 

人 ES 打开 Photoshop CS6 软件 ， 新 建 一 个 “宽度 ”为 640 像素 ,“ 高 度 ”为 400 
像素 的 文件 ， 并 命名 为 “无 线 端 商品 自 定义 展示 模块 "， 如 图 6-142 所 示 。 

SS 使 用 Photoshop CS6 软件 打开 素材 文件 “商品 自 定 义 展示 模块 jpg” ,如 图 6-143 
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名 称 ( 册 : 无线 庙 商品 自 定义 展示 粳 块 


宽度 (内 ): 像素 删除 预 设 (D).… 
高 度 (H): 像素 


分 辩 率 (R): 像素 /英寸 
颜色 模式 (M): RGB 颜色 v 8 位 
背景 内 容 (C): 白色 


颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 


图 6-143 ”打开 素材 文件 
EE》 迁 择 “ 算 形 选 框 工具 ” 国 , 将 01 模块 框 选 ， 如 图 6-144 所 示 
人 GE 选择 “移动 工具 ” 国 ， 将 选 框 内 内 容 拖 忠 至 “无 线 端 商品 自 定义 
文档 中 ， 调 整 大 小 及 位 置 如 图 6-145 所 示 。 


预 设 (p): 自 定 一 英 一 一 
存 傅 预 设 (8).… 
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人 


ma i 


图 6-145 ” 邦 昌 01 模块 


GE 按 ctltshifttAltts 组 合 键 ， 在 弹出 的 “存储 为 Web 所 用 格式 ”面板 中 设置 
“优化 的 文件 格式 ”为 “PNG 24”"， 如 图 6-146 所 示 。 单 击 “ 存 储 ” 按 钮 ， 在 弹出 的 对 话 框 
中 更 改 文件 名 称 ， 如 图 6-147 所 示 。 单 击 “ 保 存 ” 按 钮 将 其 保存 到 指定 文件 夹 内 。 

Ge 按 Step3 ~ step5 的 方法 制作 其 余 优 惠 券 。 至此， 无 线 端 商品 自 定义 展示 模块 
制作 完成 。 
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人 


和 
| 


| 
[一 大 
于 


图 6-147 ”更改 文 件 名 称 


5. 分 类 导航 的 制作 


无 线 端 的 分 类 导航 和 PC 端的 分 类 导航 一 样 ， 只 是 无 线 端 尺寸 较 小 ， 无 法 对 PC 端 
的 分 类 导航 进行 适 配 ， 因 此 需要 对 无 线 端的 分 类 导航 进行 重新 设计 。 无 线 端的 分 类 导 
航 尺寸 宽度 要 求 在 640 像素 以 内 。 为 了 实现 可 视 化 区 域 的 最 大 化 展示 ， 本 案例 将 针 
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对 “大 魔 树 ” 女 装 店铺 制作 一 款 尺 寸 为 640 像素 x 640 像素 的 分 类 导航 ， 具 体操 作 步 又 
如 下 。 

ES 打开 Photoshop CS6 软 件 ,新 建 一 个 “宽度 "为 640 像素 “高 度 "为 640 像 素 “分 
辩 率 ”为 72 像素 /英寸 “背景 内 容 " 为 白色 的 文件 ,并 命名 为 “无 线 端 分 类 导航 ”, 如 图 6-148 
所 示 。 


和 选择 “和 矩形 工具 ” 国 , 绘制 一 个 大 小 为 316 像素 x 312 像素 的 粉色 (及 :249， 
G:167，B:159 ) 矩形 ， 如 图 6-149 所 示 。 


名 称 (由 :无线 涡 分 类 导航 
三 预 设 (p): 自 定 
大 小 四 
宽度 (W): 640 像素 胜 除 预 设 (D)..… 
高 度 (Htj:|60 | 像素 
做 率 Bj: 72 像素 英寸 
颜色 模式 (M): RGB 颜色。 ~ 8 位 
背景 内 容 (C): 白色 


高 级 


图 6-148 ”新 建文 件 图 6-149 ”绘制 矩形 


EB》 用 相同 方法 再 绘制 如 图 6-150 所 示 的 6 个 矩形 ， 大 小 都 为 316 像素 x 154 像 
素 , 颜色 分 别 为 填充 为 “青色 ”( R:122, G:207, B:226 )、“ 黄 色 ”( R:247, G:190, B:134 ) 
和 紫色 (R:181，G:166，B:214 )。 选 中 所 有 和 矩 形 图 层 ， 按 Ctrl+G 组 合 键 进行 编组 ， 并 将 
组 命名 为 “ 底 色 ”。 

ESZ 远 择 “ 横 排 文 字 工 具 ” 国 I, 输入 相关 文本 , 设置 字体 为 “方正 小 标 宋 简体 ”、 
颜色 、 字 体 大 小 及 摆 放 位 置 如 图 6-151 所 示 。 


SKIRT 
唯 闫 福 装 


点 击 查 看 


图 6-150 ” 底 色 图 6-151 输入 文本 
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人 ES 远 择 “ 算 形 工具 ” 国 绘制 如 图 6-152 所 示 的 白色 和 矩形, 将 “点 击 查看 ”文本 
颜色 改 为 “粉色 ”( R:249，G:167，B:159 ), 效果 如 图 6-153 所 示 。 

GE 选择“ 彬 圆 工具 ” 图， 和 “无 ”、 描 边 粗细 为 “1 像素 ”、 
描 边 颜 色 为 “粉色 ”( RR:249，G:167，B:159 ), 绘制 一 个 18 像素 x 18 像素 的 正 圆 形 ， 如 
图 6-154 所 示 。 


图 6-152 ”给 制 矩 形 图 6-153 ”改变 字体 颜色 图 6-154 ”绘制 圆 形 


选择 “ 自 定义 形状 工具 ” 国 ， 在 选项 栏 中 选择 “箭头 6” 四 ,在 正 圆 形 内 
部 绘制 一 个 箭头 形状 ， 如 图 6-155 所 示 。 

人 ES 选中 梢 圆 图 层 和 形状 图 层 ， 在 选项 栏 中 分 别 单 击 “ 水 平 居中 对 齐 ”按钮 恩 和 
“垂直 居中 对 齐 ”按钮 国 尾 其 居中 对 齐 。 效 果 如 图 6-156 所 示 。 选 中 这 两 个 图 层 按 Ctrl+E 
En 

选中 除 “ 底 色 ” 图 层 组 和 背景 图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 对 选中 
ES 命名 为 “唯美 裙 装 "， 如 图 6-157 所 示 。 


® 


图 6-155 ”绘制 形状 图 6-156 ”居中 对 齐 图 6-157 图 层 编 组 
SID》 使 用 step4 ~ step9 的 方法 制作 其 他 模块 ， 效 果 如 图 6-158 所 示 。 
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子 专区 夏季 T 怕 
庆 2 这 


D 衣 /外 套 背心 吊带 


图 6-158 ”完成 其 他 模块 
GE 置 人 如 图 6-159 所 示 的 素材 “新品 .png 套装 .png”“ 裤 子 png” 上装 png”T 
恤 .png” 等 ,调整 大 小 及 位 置 如 图 6-160 所 示 。 
-一 [Se ea 
TO" ， 素材 ET 站 | 
组织 ” 。 包 会 到 诺 宁 ~ ~ © 


共享 ” 次 JO 灯 片 
cf 
< 上 | 
时 尚 T 旬 | 
: as | 
浊 计算 机 
贸 本 地 碟 走 (C) 
器 欢 件 (D 


图 6-159 选择 素材 图 片 
GE 将 新 置 入 的 图 片 图 层 按照 如 图 6-161 所 示 的 排列 方式 放置 在 “ 底 色 ”图 层 组 
内 相对 应 图 层 模块 的 上 方 。 

选中 “唯美 裙 装 "图 层 , 按 Ctrl+Altt+G 组 合 键 为 图 层 创建 剪 切 蒙 版 ,如 图 6-162 
所 示 。 剩 余 的 智能 对 象 也 按 相同 方法 创建 剪 切 蒙 版 。 至 此 ， 分 类 导航 的 设计 制作 完成 ， 最 
终 效 果 图 如 图 6-163 所 示 。 
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图 6-161 更 改 图 居 位 置 


套装 专区 


Cl) Y ss 


e Ne YY 旭 
| 4 


| 


图 6-162 
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创建 剪 切 莹 版 
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WT 


卫衣 /外 套 


一 SUIT 一 


图 6-163 ”手机 分 类 导航 效果 


6.4 本 章 小 结 


本 章 主要 介绍 了 快速 制作 店铺 首页 的 相关 知识 ， 包 括 PC 端 首页 规划 方案 、PC 端 首 
页 和 无 线 端 首页 的 设计 与 制作 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 掌握 PC 端 首 页 规划 的 方法 ， 能 够 对 PC 端 首页 及 无 线 
端 首页 进行 设计 装修 。 
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宝贝 详情 页 的 设计 


学 习 目标 

知识 目标 |。 认识 宝贝 详情 页 及 其 主要 模块 
。 了解 无 线 端 宝贝 详情 页 特征 

。 掌握 PC 端 宝贝 详情 页 设计 技巧 
。 掌握 无 线 端 宝贝 详情 页 制作 技巧 


技能 目标 


买 家 在 淘宝 首页 搜索 并 浏览 商品 时 ， 一 般 会 直接 进入 宝贝 详情 页 。 据 统计 ，99% 的 顾客 是 在 
查看 宝贝 详情 页 后 进行 购买 的 ， 所 以 详情 页 的 好 坏 会 直接 影响 店铺 转化 。 本 章 将 从 详情 页 的 认识 、 
详情 页 布局 、 详 情 页 设计 等 方面 详细 讲解 宝贝 详情 页 的 设计 技巧 。 
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7.1 认识 宝贝 详情 页 


7.1.1 什么 是 宝贝 详情 页 


宝贝 详情 页 不 仅 可 以 向 顾客 展示 商品 的 规格 、 颜 色 、 细 节 、 材 质 等 具体 信息 ， 还 能 向 
顾客 展示 宝贝 的 优势 ， 通 常 一 个 好 的 详情 页 可 以 深入 人 心 ， 打 动 消费 者 。 图 7-1 与 图 7-2 


全 
园 ee 一 ee ee 


图 7-1 宝贝 详情 页 (1) 
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所 示 即 为 某 款 毛 毯 的 详情 页 效果 ， 设 计 师 从 材质 属性 、 细 节 展 示 、 情 景 展示 等 方面 人 手 进 
行 宝贝 详情 页 的 设计 ， 诠 释 了 宝贝 精良 的 品质 ， 以 吸引 消费 者 购买 。 


| me 
给 、 ee 


Mormatien, 六;- 
上 轩 质 um [颜色 sn | 
水 曲直 打印 花 面 28/ 入 
庄 关 托 色 而 
属性 www 用 途 mm 
环保 后 性 印 花 二 至 闪 租 | 午 卫生 
器 用 空 测 铬 | 沙发 
床单 贡 


Rm 


RR 寺 : 150"100 150"200 


Fn 
下 


村 Detaw 


水 晶 起 双 图 案 面 
法 兰 绒 纯色 面 
居 软 丝 没 质地 细 且 
要 儿 都 能 使 用 
更 安心 


ns 
Nn 


2 一 禾 多 用 
ZR 站 宝宝 善 粮 / 午 儿科 / 空 良 禾 
发/ 床 音 布 
~ 
易于 打 理 
不 易 掉 毛 /不 易 壬 色 
不 号 和 


图 7-2 ”宝贝 详情 页 (2 ) 


本 章 将 为 “大 魔 树 ” 女 装 店 设计 店铺 详情 页 ， 在 搭配 时 可 以 以 常规 的 详情 页 为 出 发 点 
进行 详情 页 的 规划 。 
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7.1.2 ”宝贝 详情 页 的 主要 模块 


宝贝 详情 页 同样 由 不 同 的 模块 组 成 ， 其 中 顶部 为 店 招 和 导航 条 ， 和 首页 模块 类 似 。 导 
航 条 下 方 为 宝贝 基础 信息 ， 该 区 域内 容 会 根据 发 布 宝贝 时 填写 的 信息 自动 生成 。 宝 贝 基 础 
信息 下 方 可 以 分 为 侧 栏 和 宝贝 描述 信息 两 部 分 ， 具体 结构 如 图 7-3 所 示 。 


图 7-3” 宝 页 详情 页 结构 

在 图 7-3 所 示 的 宝贝 详情 页 结构 中 ， 左 侧 的 区 域 可 放置 搜索 模块 、 宝 贝 分 类 模块 、 宝 
贝 排行 模块 、 收 藏 模块 和 宝贝 推荐 模块 等 。 右 侧 区 域 有 固定 的 宝贝 描述 信息 模块 ， 除 该 模 
块 外 ， 还 可 在 其 下 方 放置 旺 铺 关联 模块 以 及 自 定义 区 。 

在 宝贝 详情 页 模块 中 ， 美 工 设计 的 重点 是 自 定义 区 与 宝贝 描述 信息 描述 区 域 。 其 中 宝 
贝 描述 信息 区 域 一 般 包 括 宝 贝 展示 、 宝 贝 细 节 、 产 品 规格 、 产 品 功 能 等 。 

。 宝贝 展示 : 宝贝 展示 是 买 家 了 解 宝贝 的 主要 界面 。 在 设计 宝贝 展示 部 分 时 ， 可 以 将 

宝贝 做 一 个 巧妙 的 摆 拍 ， 或 为 其 添加 一 个 吸引 人 的 场景 与 广告 文案 ， 这 样 才能 更 好 

地 展示 店铺 商品 自身 的 优势 ， 使 买 家 充分 了 解 宝贝 ， 如 图 7-4 所 示 。 

。 宝 贝 细节 : 宝贝 的 细节 是 消费 者 在 购买 商品 时 最 想 要 了 解 部 分 ， 所 以 在 制作 宝贝 描 

述 图 的 时 候 , 应 最 大 限度 地 把 宝贝 的 优势 细节 展示 出 来 , 例如 采用 对 比 、 放 大 等 手法 ， 

图 7-5 展示 了 宝贝 细节 的 放大 图 。 

。 产 品 规格 : 买 家 购买 某 些 商品 时 ， 需 要 根据 尺寸 购买 适合 自己 的 商品 ， 如 一 些 数码 

产品 、 服 装 、 鞋 等 。 买 家 通过 图 片 并 不 能 准确 把 握 尺码 的 大 小 ， 此 时 加 入 产品 规格 
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V 领 + 翻盖 口 投 设 计 


/ 而 法 大 方 的 熏 包 ,中 V 代 的 设计 ， 基 戎 对 交 的 大 
方形 秋 羔 口 釉 ， 增 酒 著作 这 后 主 寅 女方 美 呈 。 


图 7-4 ?4 宝贝 展示 模块 展示 效果 图 7-5 宝贝 细节 放大 


参数 模块 就 能 给 买 家 一 个 选择 参考 ， 减 轻 客服 压力 ， 如 图 7-6 所 示 。 

。 功 能 展示 : 若 买 家 在 购买 商品 时 重视 它 的 功能 性 ,那么 在 进行 店铺 装修 时 需要 添加 
功能 展示 模块 ， 将 商品 的 各 个 功能 进行 详细 介绍 。 

。 搭 配 展示 : 很 多 买 家 在 购买 商品 时 不 懂得 搭配 ， 此 时 通过 搭配 展示 可 以 为 其 提供 专 
业 的 搭配 建议 。 并 且 ， 搭 配 展示 还 可 以 让 买 家 一 次 性 购买 更 多 的 商品 ， 提 升 店铺 销 
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同色 系 腰带 设计 


/ 项 间 配 有 同色 系 的 用 谢 ， 可 收 萎 穿 捧 ， 更 好 
的 修饰 响 部 线条 ， 企 身 显 疫 . 


> 


RAR 
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售 业绩 ， 如 图 7-7 所 示 。 


抽 店 宝贝 详情 累计 评论 16 考 李 服务 英里 - 


Koro X Produc info 


面 ， 料 :西装 杭 混 坊 邓 软 指数 。 未 软 。 返 中 。 较 硬 。 硬 抵 
尺 码 : 均码 弹力 指数 。 超 弹 弹力 。 适中 无 滋 
颜色: 黄色 /黑色 厚度 指数 。 厚实 。 适中 偏 薄 。 招 薄 


版 型 指数 。 紧身 ”修身 。 适中 克 松 


尺码 恋 长 肩 帘 袖 长 袖口 图 胸 国 
均码 116 刀 4 22 116 


* 衣服 尺寸 均 为 人 工 平 铺 测 最 ， 有 误差 1-3CM 属 正常 ， 望 见 这 ! 


图 7-6 产品 规格 模块 


I JN 


COLLOCATION. WEN 六 


套餐 价 
40+ 304 10 5 *289 


图 7-7 ”商品 搭配 模块 
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。 包 装 展示 : 精美 的 包装 可 以 提升 商品 的 价值 ， 是 店铺 品质 和 实力 的 体现 ， 对 包装 进 
行 展 示 能 够 提升 买 家 对 商品 认同 感 ， 进 而 促进 转化 。 

。 促销 活动 : 开 网 店 需要 做 一 些 促 销 活动 ， 适 当 让 利 给 买 家 ， 以 获得 更 多 的 流量 和 订 
单 ， 最 终 获 得 更 大 的 利益 。 详 情 页 中 添加 宝贝 促销 信息 ,能 够 促进 消费 者 做 出 决策 ， 
如 图 7-8 所 示 。 


商品 洋 舍 。 | 村 寺 评价 15 Ee 如 
吕 光 ;KUO5E/ 阅 亿 ES: KS31808008 人 和 了 5 给)53.9% 本 rn 
四 丁 D a 


。 服 各 岳 量 


图 7-8 促销 活动 版 块 
。 关联 营销: 关联 营销 模块 主要 用 于 推荐 搭配 宝贝 或 推荐 类 似 宝 贝 。 推 荐 搭配 的 宝贝 
可 以 增加 客 单价 ， 而 推荐 类 似 宝贝 ， 可 以 在 买 家 不 满意 当前 商品 时 给 出 更 多 产品 选 
择 ， 尽 可 能 留 住 客户 ， 提 高 店铺 的 流量 转化 率 。 
会 员 营销 : 一 个 成 功 的 店铺 既 要 能 够 招揽 到 新 的 顾客 ， 还 需要 对 旧 顾 客 具 有 吸引 力 。 
会 员 营销 模块 可 以 促进 消费 者 进行 二 次 甚至 更 多 次 的 消费 ， 同 时 会 员 制 也 可 以 带 来 
间接 的 客 源 ,增加 店铺 订单 。 会 员 营销 的 常用 手段 是 组 建 粉丝 群 . 开 设 各 种 会 员 活动 、 
会 员 折扣 等 ， 这 些 都 可 以 通过 会 员 营销 模块 展示 。 
“。 证书 保证 : 买 家 在 网 购 时 ， 质 量 是 很 多 买 家 较 担 心 的 问题 ， 通 过 展示 质 检 合格 证 书 、 
好 评 以 及 三 包 服 务 可 以 打消 顾客 这 一 顾虑 。 
。 买 家 须知 : 买 家 须知 模块 可 以 规避 在 购买 时 的 不 必要 误会 ， 减 少 很 多 售后 问题 ， 如 
图 7-9 所 示 。 
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BUYERS DESCRIPTION 


卖家 说 明 
[Fs ES EEEBo 
本 让 出 售 的 宝贝 均 为 太平 岛 乐 末 家 居 服 正品 由 于 库存 变动 频率 ， 当 库存 数量 低 于 5 件 时 ， 店铺 发 货 时 间 为 所 有 非 预 售 的 付款 订单 会 
仅 限 本 店 出 售 ， 请 您 放心 选 购 | 戎 怎 咨 询 在 线 客服 或 振 打 400-700-7088 联 在 72 小 时 内 发 出 ， 会 有 短信 提 虱 ， 这 议 亲 们 
系 到 我 们 ， 避 免 造 成 不 必要 的 麻烦 。 保持 手机 的 畅通 ， 以 便 更 快 收 到 您 的 包 囊 。 
EE ERBZ 


本 店 首发 是 丰 ， 故 丰 不 到 的 地 方 发 EMS, 目 商品 内 页 有 详细 的 尺寸 表 可 殿 参考 ， 可 根据 
前 只 支持 这 两 种 快递 ， 不 接受 其 他 快递 的 指 自身 尺 司 选择 ， 建 议 拍 前 咨询 客服 意见 | 


1 节 本 的 颜色 与 的 颜色 可 能 会 关 到 ， 因 为 个 是 相 内 失手 ， 客 及 六 ， 写 一 个 呈 自若 光 日 了 下 手 ， 会 比 区 
生 ， 朋 分 衣服 也 会 有 环境 色 的 各 咯 而 产生 些许 抽 觉 上 的 色 末 效果 。 在 室内 外 不 同 的 环境 色 下 ， 本 身家 服 训 会 旺 现 出 不 同 
的 基色 ， 所 以 可 ,结合 参 考 ， 有 此 商品 ， 页 人 另 更 为 直观 。 全 到 的 衣 碑 可 能 是 在 刘 光 续 下， 你 人 地 得 有 芝兰 请 到 

自 XE 下 上 身 反 效果 


您 收 细 亲 品 时 ， 快 手记 在 途中 可 能 受到 挤 压 ， 外 包 才 会 有 经 共 受 损 ， 请 六 角 、 
后 扯 手 ， 实 慰 出 厂 的 产品 我 们 者 区 过 ， 但 网 络 购物 运输 毕竟 有 况 庙 。 所 您 全 到 移 呈 后 可 以 根据 不 同 商品 的 材质 ， 自 
PE 和 效果 会 更 加 好 现 。 人吉 条 选择 是 于 

哦 。 因 有 此 材质 是 完全 没 必 要 整 和 的 ， 也 不 适合 整 芝 ， 急 记 ， 


en 交 日 妈 同 


图 7-9 ” 买 家 须知 


7.2 了 PC 端 宝贝 详情 页 设计 与 制作 


在 宝贝 详情 页 中 ， 宝 贝 描 述 信息 图 是 需要 美工 重点 制作 的 部 分 。 一 个 内 容 具体 、 详 细 
的 宝贝 描述 信息 图 才 可 以 突出 商品 品质 、 展 示 商 品 细节 ， 从 而 促使 消费 者 下 单 购买 。 本 节 
将 讲解 详情 页 的 设计 与 制作 方法 。 


7.2.1 设计 宝贝 详情 页 布局 


宝贝 详情 页 的 主要 作用 是 向 买 家 介绍 产品 并 展示 店铺 风格 ， 它 是 买 家 与 商品 接触 的 桥 
梁 。 设 计 宝贝 详情 页 首先 要 做 的 就 是 页 面 布局 ， 然 后 再 根据 布局 进行 细节 设计 。 下 面 介绍 
详情 页 布局 的 设计 方式 。 

EE 登录 淘宝 网 ， 进 入 “卖家 中 心 ” 页 面 ， 单 击 左 侧 导航 栏 中 的 “店铺 装修 ”， 
进入 店铺 装修 页 面 ， 选 择 “PC 端 ” 一 “宝贝 详情 页 ”， 单 击 “装修 页 面 ”按钮 ， 进 入 宝贝 
详情 页 ， 如 图 7-10 和 图 7-11 所 示 。 
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默认 三 贝 洋 情 页 


Ea 


更 新 时 间 


2018.08.14153 
030 


图 7-10 ”店铺 装修 后 各 
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图 7-11 


详情 页 装修 布局 页 面 


人 GE 挝 择 “ 自 定义 区 ”模块 ， 拖 动 模块 到 “宝贝 描述 信息 ”模块 下 方 ， 使 用 相同 
的 方法 再 根据 需求 添加 自 定义 区 模块 ， 如 图 7-12 所 示 。 自 定义 模块 主要 用 来 上 传 宝贝 促 


销 活动 等 内 容 的 图 片 。 


EAN, mE 中 


Ls Wd 


二 为 (全 = 88 1 20090e31310:1646 Cg 
:Ne 询 冯 老家 的 主 由 B91 200906-3110:16"15 过 
天 GE 
日 em 天 过 zspne 有 加 日 4m 分 下 
Ba mel oH 1952et 


Me Veen enetaaeontezmefe 


去 人 宝 


通知 喜 付 宝 
过 天 站 。 》 。 半 节 到 六 从 全 “| 装 芝 注意 。 》 着 委 训 基 守 》 坟 地 


图 7-12 添加 自 定 又 区 


197 


GRASS 


店 美工 设计 实 操 , 配色 、 布 局 、 修 图 、 装 修 


GB》 模块 添加 完成 后 ， 单 击 “ 布 局 管理 ”选项 卡 标签 ， 进 入 布局 管理 界面 ， 该 界 
面 可 看 到 整个 详情 页 布局 样式 ， 如 图 7-13 所 示 。 


图 7-13 详情 页 布局 管理 


7.2.2 ”宝贝 描述 图 制作 技巧 


美工 在 设计 宝贝 描述 图 的 时 候 ， 要 充分 地 了 解 商品 功能 、 卖 点 等 ， 才 能 制作 出 凸显 商 
品 亮点 、 吸 引 买 家 眼球 的 详情 页 ， 从 而 提升 成 交 量 和 转化 率 。 宝 贝 描述 图 制作 技巧 可 以 总 
结 为 以 下 几 点 。 


1. 添加 焦点 图 展示 ， 抓 住 顾 客 眼球 

一 张 优质 的 焦点 图 能 立刻 吸引 消费 者 的 注意 力 。 焦 点 图 要 选择 具有 视觉 冲击 力 的 图 片 ， 
一 般 是 商品 的 模特 图 或 者 场景 图 。 

同时 在 图 片 的 设计 中 搭配 文字 等 设计 素材 来 增加 用 户 对 品牌 的 认 知 度 ， 以 此 来 泻 染 气 
氛 ， 如 图 7-14 所 示 。 


2. 优化 卖点 ， 提 炼 商品 亮点 


卖点 图 主要 由 细节 图 片 和 文案 组 成 ， 根 据 商 品 特点 从 不 同 角度 提炼 的 亮点 ， 如 设计 师 
说 、 潮 流 趋势 、 亮 点 解说 、 版 型 特点 、 工 艺 解读 、 细 节 卖 点 以 及 面料 解析 等 。 

卖点 的 提炼 除了 从 商品 的 自身 特点 出 发 ， 更 是 要 站 在 买 家 的 角度 ， 了 解 买 家 需求 与 关 
注 ， 如 图 7-15 所 示 。 好 的 文案 能 够 用 简短 的 几 个 字 就 直接 提升 买 家 的 购买 欲 ， 简 洁 明了 。 


3. 保证 商品 信息 翔实 准确 


卖点 展示 区 可 以 提起 用 户 的 购买 欲 ， 而 商品 信息 区 域 就 是 直接 决定 用 户 要 不 要 购买 的 
关键 。 准 确 、 真 实 ， 有 效 且 美观 地 展示 商品 的 面料 、 指 数 、 尺 码 等 信息 能 够 直接 促成 客户 
购买 行为 ， 如 图 7-16 所 示 。 
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TO BE 下 一 一 
UNIQUE GIRL 


高 腰 格 纹 百 裙 裙 也 能 成 功 抢 戏 
腰部 主题 贴 标 ， 做 工 细腻 


图 7-14 焦点 图 图 7-15 ”卖点 优化 


尺寸 表 裙 长 ”腰围 ” 展 围 探 围 


Sass) 40 65 / 2312 / / | 
Mauso) 41 68 i 236 / 
L (65 42 了] 2401S / / 


此 数据 在 衣服 平 稍 下 测量 所 得 ， 因 测量 方法 不 同 会 有 2-4 厘 米 的 误差 


* 因 个 人 体型 差异 ， 请 根据 穿 衣 习惯 选择 尺码 ， 如 有 疑惑 ， 可 咨询 客 股 
* 客服 应 邀 提供 尺码 仅 供 参考 ， 请 勿 以 此 作为 退换 理由 


试 穿 参考 
Ei 
161 164 165 162 167 
43 50 49 60 56 
/ / / / 1 
66 68 65 74 70 
86 91 90 95 91 
试 穿 体验 
S M M | 二 
大 小 合适 。 | S 码 有 点 案 | il 码 合适 全 
| 上 
建议 腰 细 妹 队 | 下 以 着 杰 妥 | 可 以 计件 衣 腿 | 74-75 梧 图 | 避 以 守 一 件 胡 虽 | 
大 型 旺 辣 显 长 |。 裙子 仿生。 | “证 旭 字 ”| 


图 7-16 ”商品 详细 信息 
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4. 添加 搭配 推荐 

根据 市 面 上 不 同 的 搭配 形式 , 搭配 推荐 一 般 分 为 三 大 类 , 分 别 是 关联 搭配 、 同 类 推荐 、 
场景 化 搭配 。 关 联 搭配 与 同类 推荐 只 需 在 后 台 进 行 设置 即 可 ， 而 场景 化 搭配 是 最 能 体现 商 
品 的 特性 ,提升 用 户 购 买 代入 感 的 搭配 方式 。 场 景 化 搭配 基于 着 装 搭配 逻辑 ,在 商品 拍摄 时 ， 
可 以 让 模特 穿 上 搭配 好 的 多 款 同期 在 售 商品 进行 拍摄 ， 并 在 详情 页 中 合理 地 岁入 对 应 搭配 
产品 图 片 以 及 链接 , 将 用 户 带 和 着装 搭配 场景 中 , 从 而 实现 用 户 联 单 购买 , 如 图 7-17 所 示 。 


BUY 


图 7-17 ”搭配 推荐 
目前 除了 规模 较 大 、 人 力 充足 的 服装 商家 ， 多 数 商 家 不 会 制作 场景 化 搭配 。 主 要 由 于 
其 操作 难度 比较 大 ， 需 要 从 摄影 策划 端 开 始 规划 ， 搭 配 图 片 以 及 链接 的 制作 ， 后 期 还 需要 
花费 比较 多 的 时 间 进 行 维护 ， 而 且 还 涉及 一 定 难度 的 代码 编写 。 


5. 模特 展示 ， 全 方位 呈现 

模特 展示 区 是 服装 商品 上 身 效果 展示 的 重点 ， 因 为 买 家 更 注重 商品 穿 在 身上 的 效果 ， 
可 以 让 买 家 通过 模特 图 效果 全 面 了 解 商品 。 一 般 在 模特 拍摄 阶段 ， 会 从 模特 的 正 、 侧 、 背 
面 来 采集 图 片 ,并 且 在 详情 页 中 全 方位 展示 ,如 图 7-18 所 示 。 而 且 对 于 一 款 多 色 的 服装 商品 ， 
穿着 不 同 颜色 服装 的 模特 图 的 排列 逻辑 显得 至 关 重 要 。 商 家 可 以 按 主 、 副 色 依 次 展示 ， 先 
展示 四 五 张 主推 颜色 商品 图 片 ， 然 后 再 展示 三 四 张 辅 推 颜色 的 商品 图 片 。 

这 里 需要 强调 的 是 , 很 多 商家 会 误 认为 模特 展示 图 的 数量 越 多 越 好 , 其 实 这 是 错误 的 ， 
就 比如 讲 故 事 ， 越 长 的 故事 越 容 易 让 读者 找 不 到 重点 。 而 且 图 片 太 多 会 造成 详情 页 宛 长 ， 
加 载 慢 ， 从 而 容易 导致 用 户 流 失 。 所 以 ， 在 模特 展示 部 分 ， 建 议 商 家 通过 4~ 6 张 不 同 角 
度 的 商品 图 片 多 方位 地 展示 商品 。 
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图 7-18 产品 多 方位 展示 


6. 平 铺 细节 ， 多 角度 展示 

由 于 平台 化 的 购物 方式 无 法 让 买 家 直接 多 角度 地 全 面 感受 商品 质量 以 及 触感 ， 因 此 平 
销 图 、 细 节 图 是 唯一 能 够 参考 的 依据 。 一 般 要 求 平 销 图 能 够 规整 地 展示 商品 的 正 反面 效果 ， 
而 细节 图 则 更 多 地 通过 近 距 离 的 商品 细节 拍摄 和 展示 商品 的 做 工 . 色彩、 面料 等 , 如 图 7-19 
所 示 。 品 牌 附加 值 较 小 的 商家 ， 通 过 精 修 细节 图 ， 辅 于 匹配 文案 来 画龙点睛 ， 更 有 助 于 引 
导 买 家 下 单 


黑白 格 纹 元 素 


图 7-19 平 铺 细 贡 展示 


7.2.3 ”PC 端 宝贝 描述 图 制作 


了 解 了 宝贝 描述 图 制作 技巧 ， 下 面 以 “大 魔 树 ” 女 装 店铺 内 某 款 雪 纺 衫 的 详情 页 面 为 
例 ， 制 作 一 个 宝贝 描述 图 。 宝 贝 描述 图 主要 包含 焦点 图 和 详情 图 两 个 部 分 ， 它 们 的 宽度 小 
于 750 像素 即 可 ， 高 度 没 有 限制 ， 但 是 为 了 消费 者 在 打开 页 面 时 更 流畅 ， 建 议 不 要 太 长 。 
本 案例 将 制作 一 个 宽度 为 750 像素 的 宝贝 描述 图 ， 具 体制 作 方法 如 下 。 


1. 焦点 图 制作 
焦点 图 一 般 位 于 宝贝 描述 的 最 上 方 ， 类 似 于 首页 中 的 轮 播 海报 。 焦 点 图 中 可 以 展示 商 
品 卖点 、 促 销 活动 和 优惠 特价 等 信息 ， 以 及 品牌 形象 和 设计 理念 。 在 设计 焦点 图 时 ， 要 注 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


意 风 格 的 统一 ， 不 要 与 下 方 的 详情 图 产生 严重 的 色差 对 比 。 
3 新建 一 个 “宽度 ”为 750 像素 、“ 高 度 ” 为 412 像素 、“ 分 辩 率 ”为 72 像素 / 
英寸 、“ 背 景 内容 ” 为 白色 的 文件 ， 并 命名 为 “详情 页 焦点 图 ”， 如 图 7-20 所 示 。 


存储 预 设 (5).…… 
是 除 预 设 (D)..， ] 


高 度 (H): 412 你 素 ~ 
分 养 率 (R): 72 
颜色 模式 (M): RGB 颜色。 ~ 
背景 内 容 (OQ: 白色 


入 高 级 


颜色 配置 文件 (9): 工作 中 的 RGB: sRGB IEC6196... ~ 
像素 长 宽 比 (X): 方形 像素 


图 7-20 ”新 建文 档 


人 GE 将 背景 填充 为 “ 浅 灰 色 ”(R:248,G:248,B:248 ), 置 入 如 图 7-21 所 示 的 “ 雪 
纺 衫 模特 01.png” 和 “ 雪 纺 衫 模特 02.png” 素 材 ， 调 整 大 小 并 移动 至 合适 位 置 ， 如 图 7-22 
所 示 。 


师 CZBK-20180521 
全 r7ov stonene ™ 


和 


图 7-21 选择 素材 图 片 
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f 
| 
图 7-22 ”和 置 入 素材 


人 GE 输入 横 排 文本 “ 夏 日 型 动 ” 等 相关 文本 , 中 文字 体 分 别 为 “方正 正 黑 中 简体 ” 
和 “黑体 ”、 英 文字 体 为 Arial、 字 体 颜 色 为 “粉红 色 ”( 有 :218，G:133，B:156 )， 大 小 如 
图 7-23 所 示 。 


Te 
a (obe realed Pre nnt or 


图 7-23 输入 文本 
选择 “矩形 工具 ” 国 ， 绘 制 一 个 大 小 为 279 像素 x 26 像素 的 矩形 ， 设 置 填 
充 颜 色 为 “粉色 ”( R:218，G:133，B:156 )、 描 边 为 “无 "， 将 “7/10 新 品 …” 等 文本 颜 
色 替 换 成 “白色 "。 至 此 ， 详 情 页 焦点 图 制作 完成 ， 如 图 7-24 所 示 。 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


2. 详情 图 模板 制作 

由 于 每 个 宝贝 的 详情 页 中 的 商品 类 型 大 多 是 相同 的 ， 因 此 为 了 节省 时 间 ， 需 要 先 设计 
一 个 宝贝 详情 图 的 模板 ， 该 模板 中 主要 包含 商品 展示 、 信 息 描 述 和 快递 与 售后 三 个 模块 ， 
具体 操作 步骤 如 下 。 

GE3 新 建 一 个 “宽度 ”为 750 像素 “高 度 ” 为 1200 像素 “分 辩 率 ”为 72 像素 / 
英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “设计 模板 ” ， 如 图 7-25 所 示 。 


名称 (N): 设计 模板 
[三 预 设 (P): 自 定 - - ER 
A ~ [ 存 侍 设 (5).。 ] 
宽度 (W): 750 ”像素 ~ 有 条 和 设 ([D). 
高 度 (H): 1200 像素 高 
分 辩 诗 (Rj: 72 ”| 像素 /十 ~ 
颜色 模式 (M): RGB 颜色 。 ~ 8 位 
背景 内 容 (QO: 白色 ~ 让 
涪 高 级 


图 7-25 ”新 建文 件 


EE 将 背景 填充 为 “灰色 ” (R:247,G:247,B:247 )。 选择 “ 横 排 文字 工具 ” 贺 ， 
输入 相关 文本 , 设置 字体 为 “ 张 海 山 锐 线 体 简 ”、 字 体 颜色 为 “紫色 ”(R:58,G:37,B:75)、 
字体 大 小 及 粗细 如 图 7-26 所 示 。 

人 SEE 选择 “直线 工具 ”上 辆 ， 绘制 一 个 填充 为 “无 "、 描 边 粗细 为 “1 像素 ”、 描 边 
颜色 为 “紫色 ”( R:58，G:37，B:75 )、 宽 度 为 “14 像素 ”、 高 度 为 “4 像素 ”的 线段 ， 如 
图 7-27 所 示 。 

ET 按 ctrlt] 组 合 键 复制 该 线段 ， 并 按 Shift 键 将 其 副本 平移 至 合适 位 置 ， 效 果 
如 图 7-28 所 示 。 


商品 展示 = 商品 展示 = 商品 展示 = 
BRIGHT SPOT OF GOODS BRIGHT SPOT OF GOODS BRIGHT SPOT OF GOODS 
图 7-26 输入 文本 图 7-27 绘制 线段 图 7-28 复制 线段 


SS 和 选中 非 背 景 图 层 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 对 选中 图 层 进行 编组 ， 并 更 
改名 称 为 “商品 展示 ”， 如 图 7-29 所 示 。 

EY》 接 两 次 cult] 组 合 键 复制 该 组 ， 分 别 命名 为 “信息 描述 ”和 “快递 与 售后 ”， 
修改 相关 文本 ， 并 移动 位 置 ， 如 图 7-30 所 示 。 


3. 详情 图 制作 
下 面 依照 模板 分 别 对 这 三 个 部 分 的 制作 方法 进行 讲解 ， 具 体操 作 步 又 如 下 。 
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图 7-29 更改 名称 图 7-30 ”模板 效果 图 


全 商品 展示 制作 

商品 展示 模块 包括 模特 展示 、 领 口 设计 展示 、 袖 口 设计 展示 、 布 料 展示 和 平 铺展 示 几 
个 模块 ， 其 具体 操作 步骤 如 下 

EE 使 用 Photoshop CS6 软件 打开 素材 文件 “模板 psd"， 将 其 另存 为 “pe 端详 
情 页 "， 如 图 7-31 所 示 。 并 选中 非 背 景 图 层 的 所 有 图 层 组 ， 按 Ctl+G 组 合 键 对 选中 图 层 组 
进行 编组 ， 并 重 命名 为 “模板 ” 


保存 在 中) 吨 计算 机 ” @3 
硬盘 9 


计算 机 
oo pe 详情 页 ~ ES 
格式 站 ) [Photoshop (#. PSD;#. PDD) = [98 
存 候选 顺 
存续 : 日 作为 副本 (Y) 主 生 (N) 
Apha 通道 (E) 去 色 (p) 
回 图 民 () 
闫 色 : 使 用 校 样 设置 (0): 工作 中 的 CMYK 


辐 JCC 配置 文件 (C): sRGB JEC61966-2.1 


编 吕 图 (TD) 回 使 用 小 写 扩 展 名 (U) 


图 7-31 文件 另存 义 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


ES 将 “信息 描述 ”和 “快递 与 售后 ”两 组 内 容 移动 
至 底部 。 在 画布 的 水 平方 向 和 垂直 方向 分 别 绘制 距离 边缘 10 像 
素 的 参考 线 ， 以 规范 可 视 化 区 域 。 

《GE 单 击 图 层 下 方 的 “创建 新 组 ”按钮 图 ,将 其 改名 图 7-32 创建 新 组 
为 “商品 展示 ”， 如 图 7-32 所 示 。 

选择 “矩形 工具 ” 国 绘 制 两 个 大 小 为 356 像素 x 414 像素 的 矩形 ,填充 为 “ 红 
色 ”(R:233，G:72，B:116 ), 将 图 层 不 透明 度 改 为 “10%”， 如 图 7-33 所 示 。 


“一 商品 展示 一 


BRIGHT SPOT OF GOODS 


图 7-33 ”绘制 矩形 
GE 置 和 人 图 7-34 所 示 的 “纯色 .png” 和 “ 坚 条 纹 .png” 素 材 图 片 ,调整 素材 位 置 ， 
如 图 7-35 所 示 。 


FRR 到 
本 ja| “7.2.5 制 f# 宝 由 洋 傅 页 面 ， 商品 展示 制作 素材 ， 素材 


图 7-34 选择 素材 图 片 
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一 一 一 商品 亮点 一 一 
BRIGHT SPOTOF GOODS 


图 7-35 ”调整 素材 位 置 


BY 在 面 布 中 输入 横 排 文本 “纯色 ”"“ 坚 条 纹 ”, 字 体 都 设置 为 “ 张 海 山 锐 线 体 简 ”、 
大 小 都 为 18 像素 ,将 其 放置 在 合适 位 置 ， 效 果 如 图 7-36 所 示 。 


BRIGHT SPOT OF GOODS 


= 商品 展示 一 


| 


竖 条 纹 


图 7-36 ” 置 入 素材 


EBB 绘制 两 个 大 小 如 图 7-37 所 示 的 矩形 。 

EE》 置 入 图 7-38 所 示 的 “模特 展示 1jpg” 和 “领口 png" 素材 图 片 ， 调 整 素材 位 
置 ， 如 图 7-39 所 示 。 将 素材 图 层 分 别 放置 在 “矩形 1” 图 层 和 “和 矩形 2” 图 层 上 方 。 

GE》 依次 选中 “模特 展示 1” 和 “领口 ”图 层 ， 按 Ctrl+Alt+G 组 合 键 分 别 为 其 创 
建 图 层 剪 切 蒙 版 ， 如 图 7-40 所 示 。 
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图 7-37 ”绘制 矩形 


图 7-39 ”调整 素材 及 图 居 信 和 置 


第 7 章 | 宝贝 详情 页 的 设计 


图 7-40 ”为 图 导 创 建 剪 切 蒙 版 
四 选择 “ 横 排 文字 工具 ” 苹 , 输入 相关 文本 , 设置 字体 都 为 “方正 中 倩 简体 ”、 


Step1 


颜色 分 别 为 粉色 (R:233,G:72,B:116 )、 灰 色 (R:50,G:50,B:50), 大 小 及 样式 如 图 7-41 


所 示 。 
NO1. 领 口 设计 盛 ! 
| 领口 绑 带 和 荷 叶 边 装饰 


| 领口 的 绑 带 设计 ， 加 上 绑 带 上 的 珍珠 装饰 ， 风 情 万 种 ， 
荷 叶 边 的 装饰 更 显 温柔 


图 7-41 输入 文本 


GE 选中 如 图 7-42 所 示 的 所 有 相关 图 层 ， 按 Ctrl+G 组 合 键 对 其 进行 编组 ， 将 组 
命名 为 “领口 展示 ”。 


图 7-42 ”对 选中 图 层 进 行 编组 
GE 用 step5 ~ Step8 的 方法 制作 袖口 和 布料 展示 模块 , 如 图 7-43 ~ 图 7-46 所 示 。 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


NOC. 袖 口 设计 


喇叭 袖口 


迷信 优雅 的 喇叭 视 ， 浪 漫 进入， 举手投足 
透 着 满 满 的 仙 气 


图 7-43 ”袖口 展示 


NO3. 布 料 展示 


聚 酯 纤维 布料 


舒适 清凉 、 垂 顺 自然 、 不 易 起 争 
、 经 久 耐 穿 


图 7-44 ”布料 展示 


图 7-45 ”图 层 组 命名 


选择 “直线 工具 ” 国 ， 在 选项 栏 设 置 “ 填 充 ” 为 无 、“ 描 边 ”颜色 为 深 灰 
色 (R:50.G:50.B:50)、 粗 细 为 “2 点 "， 在 如 图 7-47 所 示 的 位 置 绘 制 三 条 虚线 。 
GESZ 在 图 7-48 所 示 的 位 置 处 绘制 一 个 大 小 为 750 像素 x 397 像素 的 白色 和 矩形。 
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NDT1. 领 口 设计 
ram mg 


ND1. 领 口 设计 
oa 有 


er 


MP. 袖口 
NOPE, 袖口 设计 了 
ww 


NI Ed 示 


图 7-46 效果 图 图 7-47 pe 
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NG 布 勒 情 志 


图 7-48 ”绘制 矩形 


GES3B 置信 图 7-49 所 示 的 “背面 png" 和“ 正面. png" 素材 图 片 。 调 整 素材 大 小 位 置 ， 


并 输入 相关 文本 ， 如 图 7-50 所 示 。 


5 
国 并 

图 HT 上 

中 宇和 日 

师 计算 机 是 

A cy 模 行 果 示 3 设 i 模板 E77 若 品 

加 软件 (D 

P13] 


图 7-49 ”选择 素材 图 片 


七 选中 如 图 7-51 所 示 的 图 层 ， 按 CtrltG 组 合 键 对 其 编组 ， 并 重 命名 为 “ 平 铺 


细节 ”。 至 此 ， 商 品 亮点 图 制作 完成 ， 效 果 如 图 7-52 所 示 。 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


7 正面 / /背面 / 


图 7-50 ”和 置 入 素材 及 输入 文 


图 7-51 选中 图 层 


-Re 一 


| 
人 


mo. 领 D 设 计 入 
和 


ME 志 李 口误 计 
区 


图 7-52 ”商品 展示 效果 图 
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外 商品 信息 描述 图 制作 


商品 信息 描述 图 是 详情 图 中 必 不 可 少 的 组 成 部 分 ， 它 能 让 买 家 了 解 到 商品 的 尺寸 、 材 


质 等 详细 信息 ， 能 帮助 买 家 加 深 对 商品 的 认识 。 本 案例 通过 商家 提供 的 相关 信息 ， 
商品 信息 描述 图 。 由 于 商家 提供 的 文本 素材 大 多 没有 格式 ， 因 此 商品 信息 描述 图 的 
需要 设计 其 版 式 即 可 。 


制作 该 
制作 只 


使 用 Photoshop CS6 打开 素材 文件 “PC 端详 情 页 面 psd"， 将 “信息 描述 ” 


图 层 组 向 上 移动 ， 选 择 “ 和 矩形 工具 ” 国 ， 在 选项 栏 中 设置 “填充 ”颜色 为 白色 、 
为 无 ,绘制 一 个 大 小 为 726 像素 x 410 像素 的 矩形 ， 如 图 7-53 所 示 。 


-信息 描述 - 


DETAILED INFORMATION 


图 7-53 ”给 制 矩 形 
SS 选择 “ 横 排 文字 工具 ” 苹 在 画布 上 绘制 一 个 文本 框 ， 如 图 7-54 所 示 。 


= 信息 描述 ~ 
DETAILED INFORMATION 
sss -| oO 
和 令 日 
[9 | 由 


图 7-54 ”绘制 文本 框 


人 SEE 打开 对 应 的 素材 文件 来， 双击 素材 文件 夹 内 的 “商品 信息 .txt"， 打 开 该 雪 纺 


衫 的 文本 素材 ， 如 图 7-55 所 示 。 依 次 将 其 复制 到 “商品 详情 页 .psd” 文档 中 ， 并 以 
所 示 的 样式 进行 排版 。 


图 7-56 
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店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


图 7-55 ”文本 素材 展示 


= 信息 描述 ~ 


DETALED INFORMATION 


基本 信息 
名 称 : 雪 纺 衫 
面料 ，100% 聚 酯 纤维 里 料 :100% 聚 栈 纤 维 
产品 指数 
版 型 : 宽松 长 度 : 适中 
弹性 : 无 弹 厚度 ; 薄 款 
尺码 胡 长 府 宽 胸 国 下 提 禄 长 
XS 49 40 83 91 39.5 
S 50 2 85 93 40 
n 51 44 59 97 40.8 
L 52 46 93 101 41.6 


图 7-56 输入 文本 


GEZ 选择 “直线 工具 " 辆 ,在 选项 栏 设置 相关 参数 ,如 图 7-57 所 示 ; 绘制 两 条 线段 ， 
如 图 7-58 所 示 。 


R:223 G:223 B:223 


图 7-57 设置 参数 


GE 用 step4 的 方法 绘制 剩余 线段 ， 如 图 7-59 所 示 。 
GE3B9》 置 入 如 图 7-60 所 示 的 “衣服 png” 素 材 图 片 ， 调 整 素材 图 片 的 大 小 位 置 ， 
如 图 7-61 所 示 。 至 此 ， 商 品 信息 描述 图 制作 完成 。 
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基本 信息 
名 称 : 夫 纺 衫 
面料 :100% 聚 酯 纤维 


产品 指数 
版 型 : 宽松 
弹性 : 无 弹 


尺码 衣 长 
XS 49 
S 50 
用 51 
t 52 


基本 信息 
名 称 ; 雪 纺 衫 
面料 ，100% 聚 酯 纤维 


产品 指数 
版 型 : 宽松 
弹性 : 无 弹 


尺码 家 长 
xs 49 
S 50 
a 51 
L 52 


-信息 揪 述 ~ 


DETAILED INFORMATION 


里 料 : 100% 聚 酯 纤维 
长 度 : 适中 
厚度 : 薄 款 

房 宽 胸 国 下 摆 被 长 

40 83 91 39.5 

4 85 93 0 

44 B89 97 40.8 


图 7-58 ”绘制 线段 


= 信息 摘 述 ~ 


DETAILED INFORMATION 


里 料 ; 100% 聚 本 纤维 
长 度 : 适中 
厚度 : 落款 

肩 宽 胸围。 下摆 袖 长 

40 83 ?91 39.5 

42 85 9 0 

44 89 97 40.8 


46 93 101 41.6 


图 7-59 ”绘制 剩余 线段 


KW 是 “7.2.5 制作 宝贝 洋 情 页 面 商品 信息 病 述 于 制作 素材 


图 7-60 选择 素材 图 片 
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- 信息 描述 ~ 

DETAILED INFORMATION 
基本 信息 
名 称 : 雪 纺 衫 
面料 : 100% 聚 酯 纤维 里 料 ，100% 聚 酷 纤维 
产品 指数 
版 型 : 宽松 长 度 : 适中 
弹性 : 无 弹 厚度 : 薄 款 


尺码 衣 长 局 宽 。 胸围 下 摆 袖 长 


xs 4 40 83 91 39.5 
S 50 42 85 93 40 
u 51 44 89 97 40.8 
L 52 46 93 101 41.6 
图 7-61 置 入 素材 


由 快递 与 售后 图 制作 
在 商品 详情 页 中 ， 一般 都 会 有 快递 和 售后 的 信息 展示 ， 以 便 向 买 家 进一步 介绍 店铺 品 
牌 理念 和 售后 服务 。 要 求 包括 包装 信息 、 快 递 信 息 以 及 售后 信息 ， 其 制作 步骤 如 下 。 
EP 远 择 “ 算 形 工具 " 国 , 绘 制 三 个 大 小 为 “233 像素 x 152 像素 ”填充 颜色 为 “ 灰 
色 ”(R:238，G:238，B:238 )、 描 边 为 “无 ”的 矩形 ， 使 其 平均 分 布 ， 如 图 7-62 所 示 。 
= 快递 与 售后 = 


EXPRESS AND AFTER SALE 


图 7-62 ”绘制 矩 形 


GE 置信 如 图 7-63 所 示 的 “打包 箱 .png” “快递 员 .png” 和 “时 间 .png” 素材 图 片 ， 
调整 素材 图 片 的 大 小 位 置 ， 并 在 其 下 方 输入 相关 文本 ， 如 图 7-64 所 示 。 


图 7-63 ”选择 素材 图 片 
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过。 人 


选用 环保 纸 盒 包 装 ， 胶 带 密封 默认 顺丰 快递 ， 最 晚 两 天 可 达 7 天 无 理由 退货 ， 邮 费 我 们 承担 ! 


图 7-64 置 入 素材 与 输入 文本 

选择 “和 矩形 工具 ” 国 ， 在 选项 栏 设置 参数 ， 具 体 参数 设置 如 图 7-65 所 示 。 

在 如 图 7-66 所 示 的 位 置 绘制 一 个 大 小 为 726 像 素 x 74 像 素 的 矩形 ,并 在 内 部 输入 相关 文本 ， 
效果 如 图 7-67 所 示 。 至 此 ， 快 递 与 售后 模块 制作 完成 。 


图 7-65 设置 参数 


时 ”人 @ 


选用 环保 纸 爹 包装， 胶带 密封 默认 顺丰 快递 ， 最 晚 两 天 可 达 7 天 无 理由 退货 ， 邮 费 我 们 承担 ! 


图 7-66 ”绘制 矩形 


= 快递 与 售后 = 


EXPRESS AND AFTER SALE 


外 = 


选用 环保 纸 金 包装 ， 胶 带 密封 认 顺 丰 快 递 ， 最 晚 两 天 可 达 7 天 无 理由 退货 ， 邮 和 费 我 们 承担 ! 


公司 合作 的 快递 公司 为 申通 快递 ， 如 申通 不 : .上 两 家 都 不 到 请 选择 顺丰 或 EMS。 平 部 ， 的 达 ，: 


中 通 均 不 在 合作 之 列 ， 如 有 不 便 ， 敬 请 谅解 


图 7-67” 快 说 与 和 仿 后 效果 
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GE 按 CeliShifttS 组 合 键 将 其 保存 到 指定 文件 夹 内 。 至 此 ,宝贝 详情 页 制作 完成 ， 
最 终 效果 如 图 7-68 所 示 。 


ND1, 领 口 设计 
So 


Wea, LM OS. eh. 
EPP 


Aw. ie, Fe 
Er 


NOB. 布 制 展示 
raem 


Ce FA 
er 


图 7-68 效果 图 
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7.2.4 ”宝贝 促销 图 制作 


为 吸引 买 家 的 目光 ,一些 店铺 会 在 详情 页 中 放置 店铺 其 他 商品 的 关联 销售 或 折扣 活动 ， 
这 个 区 域 称 为 宝贝 促销 区 。 制 作 精美 的 促销 图 片 不 仅 能 吸引 买 家 ， 还 可 以 增加 其 他 商品 的 
点 击 率 和 曝光 率 。 尤 其 是 打造 店铺 爆 款 商品 时 ,宝贝 促销 区 是 一 个 非常 重要 的 商品 曝光 区 域 。 


1. 制作 宝贝 促销 图 的 注意 事项 
初次 使 用 旺 铺 的 卖家 ， 在 制作 宝贝 促销 区 之 前 ， 应 先 了 解 一 些 注意 事项 ， 主 要 有 以 下 
几 点 。 
*。 商品 不 易 过 多 : 宝贝 促销 图 的 商品 不 易 过 多 或 过 于 杂乱 ， 以 免 买 家 挑 花 眼 ， 反 而 失 
去 挑选 宝贝 的 耐心 ， 最 终 放 弃 购 买 商品 。 
。 图 片 高 度 不 宜 过 高 : 宝贝 促销 图 的 宽度 是 固定 的 尺寸 750 像素 ， 高 度 不 限 ， 但 是 为 
更 好 的 流量 体验 ， 高 度 不 宜 超过 700 像素 。 
。 支 持 发 布 的 模块 : 宝贝 促销 图 的 图 片 大 部 分 使 用 自 定义 内 容 模块 发 布 ， 该 模块 支持 
HTML 编辑 ， 卖 家 可 以 通过 编写 和 修改 HTML 代码 来 发 布 宝贝 促销 区 。 


2. 设 计 与 制作 宝贝 促销 图 

制作 宝贝 促销 图 的 方法 有 三 种 。 第 一 种 方法 是 在 网 上 寻找 免费 的 宝贝 促销 模板 ， 下 载 
到 本 地 计算 机 上 进行 修改 ， 这 种 方法 的 优点 是 方便 快捷 ， 缺 点 是 设计 受到 局 限 ; 第 二 种 方 
法 是 购买 模板 ， 既 省 力 又 能 挑选 到 满意 的 设计 ， 但 需要 支付 一 定 的 费用 ; 第 三 种 是 自己 设 
计 ， 这 种 方法 需要 买 家 掌握 一 定 的 图 像 设 计 能 力 ， 优 势 是 能 根据 自己 的 意向 制作 图 片 。 下 
面 以 第 三 种 方法 为 例 ， 讲 解 宝 贝 促销 图 的 制作 方法 。 

(GE 新建 一 个 “宽度 "为 750 像素 “高 度 " 为 450 像素 “分 辨 率 " 为 72 像素 /英寸 、 
“背景 内 容 ” 为 白色 的 文件 , 并 命名 为 “商品 促销 ”, 如 图 7-69 所 示 。 将 背景 填充 为 “红色 ” 
(R:127，G:12，B:9 )， 如 图 7-70 所 示 。 


颜色 模式 (M): RGB 颜色 ~ 8 位 
背景 内 容 (9: 6 色 


高 级 


图 7-69 新建 文件 


219 


RN NN 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


EAE NTA A NPANAHADIr 


图 7-70 ”填充 颜色 


GE 选择 “ 横 排 文字 工具 ” 国 , 输入 如 图 7-71 所 示 的 相关 文本 , 设置 字体 为 “ 华 
文 细 黑 ”、 颜 色 为 “白色 ” 


秋季 上 新 
折扣 热 销 


满 198 包 邮 “ 狂 稚 >> 


图 7-71 输入 文本 
EE》 远 插 “ 算 形 工具 ” 国 , 在 选项 栏 设置 “填充 ”颜色 为 白色 (了 :218，G: 133， 


B:156)、“ 描 边 ”为 无 , 绘制 一 个 大 小 为 84 像素 x 84 像素 的 矩形 ,并 复制 矩形 ， 如 图 7-72 


所 示 
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秋季 上 新 
折扣 热 销 


靖 198 包 邮 


图 7-72 ”绘制 矩 形 
GEZ 置 人 “商品 图 1”-“ 商 品 图 4"4 个 素材 图 片 ,如 图 7-73 所 示 。 调 整 素材 位 置 ， 
将 素材 图 层 分 别 放置 在 矩形 的 上 方 ， 依 次 选中 素材 图 片 ， 按 Ctrl+Alt+G 组 合 键 为 素材 图 片 
创建 剪 切 蒙 版 ， 如 图 7-74 和 图 7-75 所 示 。 


辣 | 具 ，1- 量 商品 促销 区 


商品 图 1 商品 图 2 


图 7-73 选择 素材 图 片 


到 
0 
图 

ry 


[el 
交 
吕 
村 


EE EE ELE 


商 
答 
商 
拓 
商 
拭 


图 7-74 ”创建 商 谍 莹 版 
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秋季 上 新 
折扣 热 销 


满 198 包 邮 ” 狂 截 >> 


A 


SY , Sl 
| 可 ， 


史 ;| 分 


图 7-75 ”效果 图 


GE 按 Step3 ~ step4 的 方法 ， 选 择 对 应 的 海报 素材 ， 做 出 如 图 7-76 所 示 的 样式 。 
至 此 ， 商 品 促销 模块 制作 完成 。 按 CtrltS 组 合 键 将 其 保存 至 对 应 文件 夹 内 。 


图 7-76 ”商品 促销 效果 图 


3. 给 宝贝 促销 区 添加 商品 链接 

宝贝 促销 图 制作 完成 后 ， 需 要 给 图 片 中 的 商品 添加 链接 ， 以 便 买 家 快速 进入 该 商品 详 
情 展示 页 面 。 下 面 介绍 如 何 添加 商品 链接 ， 具 体操 作 步骤 如 下 。 

EE3P 将 “商品 促销 区 jpg” 图 片上 传 到 图 片 空间 ， 将 鼠标 指针 移动 至 该 图 片 ， 在 
显示 的 一 排 按钮 中 单 击 “ 复 制 代码 ”按钮 ， 即 可 复制 该 图 片 的 代码 ， 如 图 7-77 所 示 。 

ES 打开 Dreamweaver 软件 , 单 击 HTML 选项 , 即 可 新 建 一 个 空白 文档 ,如 图 7-78 
所 示 。 

EB》 单 击 “ 拆 分 ”按钮 ， 切 换 至 拆 分 窗口 ， 删 除 左 侧 窗口 中 的 代码 ， 按 Ctrl+V 
组 合 键 将 图 片 代码 粘贴 到 该 窗口 中 ， 此 时 右 侧 窗 口 将 出 现 相对 应 的 图 片 ， 如 图 7-79 所 示 。 
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A 


EE 3 S| Susa 


i 


! 日 
加 
ul 
u 
1 


| 28 [3 
秋季 上 新 丑 A Es 
折扣 热 依 晰 用 》 


图 7-79 ”粘贴 代码 


人 GZ 单 击 “设计 ”按钮 ， 切 换 至 “设计 ”窗口 ， 单 击 “ 属 性 ”面板 中 的 “和 矩形 热 
点 工具 "， 按 住 鼠 标 左 键 ， 在 第 一 排 第 一 个 商品 上 绘制 一 个 矩形 ， 如 图 7-80 所 示 。 在 弹出 
的 对 话 框 中 单 击 “确定 ”按钮 。 
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EE 


秋季 上 新 
折扣 热 


匡 198 饭 


图 7-80 


设计 窗口 

GE 在 “属性 ”面板 中 ， 将 对 应 的 商品 链接 粘贴 到 “链接 ”文本 框 中 ， 设 置 “ 目 
标 ” 项 为 “ blank"， 如 图 7-81 所 示 。 

Snap> Keres) 

属性 

-es 

地 图 Hop 

KR OVY 


~ 闭 搞 (0) 


图 7-81 


设置 属性 值 
完成 所 有 链接 的 添加 。 


了 BB》 重复 Step4 ~ Step5， 为 所 有 商品 图 片 添加 上 超 链 接 ， 如 图 7-82 所 示 ， 此 时 已 


ET Me + A 


| 


尾 性 . 
回 | a /re 
于 i 


HE 
DOS 


oy 
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图 7-82 ”添加 超 链 接 
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ED 单 击 “ 代 码 ”按钮 ， 切 换 至 “代码 ”窗口 ， 分 别 按 Ctl+A 、CtlC 组 合 键 选 
择 和 复制 该 窗口 中 的 代码 ， 如 图 7-83 所 示 。 


图 7-83 ”复制 代码 


4. 发 布 宝贝 促销 到 宝贝 描述 模板 

在 店铺 装修 后 台 ， 可 以 通过 设置 默认 宝贝 详情 页 模板 ， 一 键 为 所 有 宝贝 详情 页 添加 宝 
贝 促销 区 。 但 是 默认 模板 只 支持 在 宝贝 详情 页 下 方 添加 相应 的 模块 。 如 需要 在 宝贝 详情 页 
描述 最 上 方 区 域 添 加 宝贝 促销 区 ， 只 能 在 宝贝 描述 页 面 中 单独 添加 。 

下 面 介绍 一 键 为 所 有 宝贝 详情 页 添加 宝贝 促销 图 的 方法 ， 具 体操 作 步骤 如 下 。 

人 SS 进入 “默认 宝贝 详情 装修 ”页 面 ， 在 7.2.1 小 节 中 已 经 添加 了 自 定义 区 ， 所 以 
此 时 页 面 中 心 已 经 新 建 了 “ 自 定义 内 容 区 ”模块 , 单 击 该 模块 中 的 “编辑 ”按钮 , 如 图 7-84 
所 示 。 


自 定 义 内 容 ， 可 以 用 未 展示 店铺 特色 的 宝贝、 活动 。 


= 一 一 一 
图 7-84 编辑“ 自 定义 内 容 区 ”模块 
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ES 进入 “ 自 定义 内 容 区 ”对 话 框 ， 选 择 “ 显 示 标 题 ” 后 方 的 “不 显示 ”选项 ， 
单 击 “ 源 码 ”按钮 [名 ,在 编辑 框 中 按 Ctrl+V 组 合 键 粘贴 宝贝 促销 图 代码 ,最 后 单 击 “确定 ” 


按钮 ， 如 图 7-85 所 示 。 


显示 标题 图 不 显示 同 显示 
本 林寺 下 加 


[<img src="https://img.alicdn.com/imgextra/i3/2095205889/O1CNO12MvD9Gd6bI0LTV_!12096209889 jpg” zt=" 商 品 促销 jpg" usemap="#Map" 


lborder="0"/> 


|<map name="Map"> 

<area shape="rect" coords="243,34,750,413" href="#https://shop116225127.taoban.com/?spm=3230r.7195193.1997079397.2.fBw6ay"> 
<area shape="rect" coords="51,227,141,317" href="#https://shop116225127.tsobao.com/?spm=a230r.7195193.1997079397.2.fBw6ay"> 
<area shape="rect" coords= 0,318" href="#https://shop116225127.ta0ba0.com/?spm=3230r.7195193.1997079397.2.fBw6ay"> 
<area shape="rect" coords="54,322,143,411" href="shttps://shop116225127.taobao.comy3spm=a230r.7195193.1997079397.2.iBway"> 
<area shape="rect" coords="145.321.230,410" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.fBw6ay"> 


</map>| 


mi 
les 内 容 正文 拇 5 分 名 自动 保存 一 次 。 自动 保存 于 : 2018-09-25 17:10:33 ， 贺 立即 保存 “恢复 编辑 历史 - 


图 7-85 ”粘贴 代码 
E>》 单 击 默 认 宝贝 详情 编辑 页 面 中 的 “发 布 站 点 ”按钮 ， 如 图 7-86 所 示 ， 根 据 
提示 完成 操作 即 可 。 


mae 


图 7-86 ”发 布 宝 幢 促 销 区 
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7.3 ”无线 端 宝贝 详情 页 设计 与 制作 


无 线 端 宝贝 详情 页 与 PC 端 宝贝 详情 页 并 不 是 同步 的 ， 也 需要 在 后 台 上 传 发 布 。 由 于 
越 来 越 多 的 网 民 喜 欢 用 手机 上 网 购物 ， 无 线 端 无 论 在 店铺 流量 还 有 成 交 额 等 方面 都 占据 着 
非常 重要 的 位 置 ， 所 以 无 线 端详 情 页 的 装修 就 显得 尤为 重要 。 本 节 将 对 无 线 端 宝贝 详情 页 
的 设计 与 制作 进行 讲解。 


7.3.1 无 线 端 宝贝 详情 页 特征 


详情 页 的 好 坏 会 影响 店铺 流量 的 转化 率 ， 由 于 网 络 的 迅速 发 展 ,使 用 手机 购物 已 经 成 
为 一 种 潮流 和 新 的 生活 方式 。 因 此 ， 无 线 端详 情 页 的 装修 势 在 必 行 。 与 PC 端 宝贝 详情 页 
相 比 ， 无 线 端 宝贝 详情 页 具有 以 下 几 个 特征 。 

。 尺 寸 更 小 : 无 线 端 详情 页 尺寸 需要 适 配 手机 ， 所 以 尺寸 往往 比较 小 ， 宽 度 一 般 为 

620 像素 ， 每 屏 高 度 不 超过 960 像素 ， 有 时 商家 为 了 能 让 买 家 在 一 层 内 看 到 一 些 具 

体 连 贯 的 信息 ， 就 需要 考虑 页 面 的 长 度 。 

*。 卖点 更 精练 : 无 线 端详 情 页 的 卖点 设计 可 参考 PC 端详 情 页 ， 但 是 无 线 端 详情 页 更 

加 注重 在 最 短 时 间 内 ， 把 买 家 的 购买 欲望 激发 到 最 大 ， 因 此 无 线 端详 情 页 的 卖点 应 

该 更 加 精练 。 

。 场景 更 加 丰富 : 由 于 无 线 端 用 户 可 以 在 很 多 种 场合 进行 购物 , 如 车 上 、 床 上 、 步 行 中 ， 

所 以 在 无 线 端详 情 页 页 面 添加 多 种 场景 可 以 更 加 贴 合生 活 , 提高 买 家 对 商品 的 兴趣 

。 页 面 切换 不 便 : PC 端 可 以 很 方便 地 通过 页 面 文字 或 按钮 切换 页 面 ， 而 无 线 端 页 面 的 

切换 就 不 是 很 方便 ， 因 此 无 线 端的 图 片 以 及 图 片上 的 引导 文字 一 定 要 清晰 并 且 有 了 吸 

引力 ， 能 够 快速 打动 消费 着 购买 。 

。 页面 文件 的 容量 更 小 : 在 PC 端 浏 览 Web 页 面 平均 需要 9M 流量 ， 若 直接 将 PC 端 

详情 页 转化 为 无 线 端详 情 页 ， 将 导致 页 面 加 载 速度 慢 ， 容 易 耗 费 买 家 更 多 的 流量 ， 

因此 无 线 端详 情 页 的 页 面 文件 更 小 。 


7.3.2 无线 端 宝贝 详情 页 设计 要 点 


基于 无 线 端 店铺 详情 页 的 特点 ， 在 设计 详情 页 时 要 注意 以 下 几 点 。 

。 图 片 设计 要 点 : 图 片 的 体积 不 能 过 大 ， 否 则 容易 出 现 加 载 慢 的 情况 ， 影 响 购 物体 验 ， 
此 时 应 在 保证 图 片 清晰 度 的 同时 压缩 图 片 。 同 时 要 注意 ， 细 节 图 不 能 太 小 ， 要 保持 
图 片 清晰 ， 这 样 买 家 才能 通过 细节 图 片 了 解 宝 贝 ， 从 而 产生 购买 欲 。 

。 文 字 设 计 要 点 : 图 片 文字 、 宝 贝 信息 和 宝贝 描述 文字 都 不 能 太 小 ， 否 则 容易 造成 描 
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述 不 清楚 的 问题 。 

。 宝 贝 重点 的 设计 : 宝贝 重点 需要 突出 ， 这 就 要 求 合理 控制 页 面 展示 的 信息 流 ， 省 略 
一 些 无 关 紧 要 的 内 容 ， 提 升 购物 体验 。 

。 尺 寸 要 求 : 无 线 端 宝贝 描述 图 宽度 为 480 像素 ~ 1242 像素 之 间 ， 但 建议 将 宽度 设计 
为 750 像素 ， 高 度 不 超过 1920 像素 。 


7.3.3 ”无线 端 宝贝 描述 图 制作 


时 间 且 能 更 好 地 与 PC 端 风格 匹配 ， 焦 点 图 直接 用 PC 端的 进行 适 配 上 传 即 可 。 
无 线 端 宝贝 详情 图 制作 有 两 种 方法 ,一 种 是 适 配 法 , 另 一 种 是 自 定义 法 ,具体 介绍 如 下 。 
。 适 配 法 : 将 PC 端详 情 图 保存 为 图 片 后 在 淘宝 后 台 自 动 适 配 ， 这 种 方法 既 便捷 又 能 
将 PC 端 和 无 线 端 的 风格 进行 统一 。 
。 自 定义 法 : 由 于 PC 端详 情 页 里 面 会 有 很 多 诸如 描述 信息 或 者 宝贝 细节 图 会 在 无 线 
端 显示 不 清晰 ， 此 时 可 根据 PC 端详 情 页 设计 无 线 端详 情 页 。 
本 案例 将 采取 第 二 种 方法 制作 一 个 宽度 为 750 像素 的 详情 图 ， 具 体操 作 步 又 如 下 。 
EE 新建 一 个 “宽度 ”为 750 像素 “高 度 ” 为 1870 像素 “分 辨 率 ”为 72 像素 / 
英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “无 线 端详 情 页 "， 如 图 7-87 所 示 。 并 在 画 
布 四 周 创 建 参考 线 。 


名 称 (由 :无线 漠 详情 页 
”” 祷 (P): 自 定 
大 下 [ 

宽度 (W): 750 像素 了 M 玫 祯 设 (D)-. 

高 度 (Hb):| 187| 。 ”| 像素 ~ 


分 状 率 (R): 72 像素 /英寸 ”~ 
颜色 模式 (M): RGB 颜色 ~ “8 位 
痛 景 内 容 (C): 白色 - 


悦 敲 豚 


图 7-87 新 建文 伞 
EH 打开 素材 文件 “设计 模板 psd"， 选 中 “商品 展示 ”和 “信息 描述 ”图 层 组 ， 
右 击 ， 在 弹出 的 对 话 框 内 选择 “复制 图 层 ” 选 项 ， 将 其 复制 到 “无 线 端 详情 页 ”文档 ， 如 
图 7-88 所 示 。 
EB》 切换 到 “无 线 端 详情 页 ”文档 ， 按 Ctrl+T 组 合 键 对 图 层 组 进行 缩放 操作 ， 
缩放 至 画布 大 小 ， 如 图 7-89 所 示 。 
GEZ9 按照 制作 PC 端详 情 页 的 方法 制作 出 如 图 7-90 所 示 的 样式 。 
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图 7-88 ”复制 图 层 图 7-89 ”缩放 图 层 
al 
oF 
| 
图 7-90 移动 图 层 


HB》 选择 “ 圆 角 矩形 工具 ” 国 , 在 选项 栏 设置 “填充 ”为 无 “ 描 边 ” 为 1 像素 “ 半 
径 ” 为 3 像素 ,绘制 一 个 204 像素 x 153 像素 的 圆 角 和 矩形。 选择 “路 径 选 择 工具 ”上 国 ， 
在 圆 角 矩形 上 单 击 ， 显 示 锚 点 ， 如 图 7-91 所 示 。 
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图 7-91 给 制 窍 形 


EB》 未 插 “ 钢 笔 工具 ” 园 ， 当 钢笔 工具 出 现 加 号 时 ， 在 图 7-92 所 示 的 圆 角 矩形 
边框 上 添加 锚 点 ， 添 加 完成 后 的 效果 如 图 7-93 所 示 。 


RR 


图 7-92 ”添加 锚 点 的 位 置 图 7-93 ”添加 锚 点 


EHR 选择 “直接 选择 工具 ” 辅 ， 选中 圆 角 和 矩 形 每 个 边 的 中 间 的 锚 点 ， 如 
图 9-94( a ) 所 示 。 按 Delete 键 删除 选中 锚 点 ,效果 如 图 7-94(b ) 所 示 。 将 其 摆 放 至 如 图 7-95 


所 示 的 位 置 。 


. | 


(a) 删除 前 (b) 删除 层 
图 7-94 ”删除 锚 点 
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图 7-95 。 摆 放 位置 
置信 如 图 7-96 所 示 的 素材 文件 “纯色 上 衣 .png”， 调 整 大 小 及 位 置 如 图 7-97 


== 
EF TE 


图 7-96 素材 展示 


图 7-97 置 入 素材 
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EHD 选择 “ 模 排 文字 工具 ” 国 , 输入 相关 文本 ， 字 体 分 别 为 “ 张 海 山 锐 线 体 简 ” 
和 方正 中 倩 简体 " ,颜色 分 别 为 “粉色 "(RR:233,G:72.B:116 ) 和 “灰色 ”( R:50,G:50,B:50)， 
如 图 7-98 所 示 。 


[ Qn | 


_ 


纯色 


清新 的 白色 雪 纺 料 在 身上 苹 苹 蔡 统 
多 一 层 纯洁 的 力量 
清除 夏天 带 来 的 浆 热 与 烦躁 


图 7-98 置 入 素材 ,输入 文本 


复制 圆 角 和 矩形 图 层 和 相关 文本 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 并 重 命名 
为 “纯色 上 衣 展 示 ”; 复制 “纯色 上 衣 展示 "图 层 组 ,修改 相关 文本 及 素材 图 片 ,效果 如 图 7-99 
所 示 ， 更 改 其 组 名 为 “ 竖 条 纹 上 衣 展 示 "”。 


地 色 
清新 的 白色 雪 纺 笠 在 身上 汗 羊 葵 绕 
多 一 层 名 洁 的 力量 
清除 夏天 促 来 的 向 夫 与 炳 腺 


L 妆 


竖 条 弘 
清爽 的 条 纹 抽 理 雪 纺 料 在 身上 弟 秆 药 绕 
清 灵 的 范 色 和 地 净 的 白色 
峰 淡 相宜 ， 成 就 自然 苇 致 后 


图 7-99 复制 图 改组 


使 用 Photoshop CS6 软件 打开 素材 文件 “ 竖 条 纹 png"， 制 作 细 节 图 后 将 其 
复制 到 “无 线 端详 情 页 ”文档 中 ， 调 整 位 置 及 大 小 ， 如 图 7-100 所 示 。 

EET 选择 * 贺 角 和 矩形 工具 " 畏 . 在 选项 栏 设 置 参 数 ,具体 参数 设置 如 图 7-101 所 示 ， 
绘制 两 个 圆 角 和 矩形 ， 并 输入 相关 文本 ,效果 如 图 7-102 所 示 。 
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博 页 的 条 纹 骨 香雪 妨 帮 在 马上 尘 半 款 此 
清风 的 蓝 白 4re 部 的 白白 
属 痰 相宜， 由 名 自然 散 到 圈 


| 


图 7-100 ”制作 细节 图 


图 7-101 参数 设置 


领口 纲 带 和 荷 叶 边 装饰 | 
领口 的 绅 带 设计 ， 加 上 绑 带 上 的 | 
珍珠 装饰 ， 风 情 万 种 ， 荷 叶 边 的 | 
装饰 更 显 温柔 | 


喇叭 袖口 
举手投足 透 着 满 满 的 仙 气 


图 7-102 ”输入 文本 


ES 选择“ 多边形 工具 ”加 ， 绘 制 两 个 大 小 、 颜 色 如 图 7-103 所 示 的 三 角形 。 
导入 “ 雪 纺 布料 jpg" 素 材 ,选择 “矩形 工具 " 国 , 绘 制 一 个 大 小 样式 如 图 7-104 
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所 示 的 矩形 ， 随 后 输入 相关 文本 ， 效 果 如 图 7-105 所 示 。 选 中 布料 图 层 及 其 相关 图 层 ， 按 
Ctrl+G 组 合 键 进 行 编组 ， 将 该 图 层 组 更 名 为 “布料 展示 "。 


| > 领口 绷带 和 荷 叶 边 装饰 
| ”领口 的 绑 带 设计 ， 加 上 绑 带 上 的 


图 7-104 ”绘制 矩形 


图 7-105 ”输入 文本 
使 用 Photoshop CS6 软件 打开 素材 文件 “PC 端详 情 图 .psd”, 将 “信息 描述 ” 
图 层 组 复制 到 “无 线 端详 情 页 ”文档 中 ， 调 整 位 置 及 文字 大 小 ， 如 图 7-106 所 示 。 至 此 ， 
无 线 端 宝贝 详情 图 制作 完成 。 按 CtrlLHShiftrs 组 合 键 将 其 保存 到 指定 文件 夹 内 。 
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纯色 刁 


请 新 的 白色 雪 纺 料 在 身上 芋 芋 棕 综 
多 一 层 纯洁 的 力量 
清除 夏天 带 来 的 问 热 与 频 躁 


> 


清 亚 的 杀 弘 肌理 雪 纺 市 在 身上 苹 芋 各 缠 
清 灵 的 医 色 赤 如 闫 的 白色 
恬 汪 相 定 ， 成 就 白 然 笠 致 证 


领口 的 带 设 计 ， 加 上 纺 带 上 的 
失效 饰 ， 风 贿 万 召 ， 前 叶 浪 的 | 


装饰 更 避 温 菜 


> 呵 电 机 口 
过 和 优盘 的 出 中 柏 ， 浪 温 壕 人 ， 
举手投足 通 着 满 满 的 仙 气 


“而 自然 :不 号 起 雏 、 经 久 耐 守 


~ 信息 描述 一 
DETALED INFORMATION 
基本 信息 产品 指数 
名 称 : 雪 纺 衫 版 型 : 宽松 。 长 度 : 适中 
面料 : 100% 聚 酯 纤维 弹性 : 无 弹 。 “厚度 : 落款 
里 料 : 100% 聚 酯 纤维 
RR 码 让 长 。 启 磷 。 胸围 。 下 副 补 攻 
全 9 9 %5 
s 0 机 的 9 0 
上 5 
吧 


图 7-106 无 线 端 详情 图 
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7.4 本 章 小 结 


本 章 主要 介绍 了 宝贝 详情 页 设计 的 相关 知识 ， 包 括 认识 宝贝 详情 页 、PC 端 宝 贝 详情 
页 设计 与 制作 、 无 线 端 宝贝 详情 页 设计 与 制作 等 内 容 。 

通过 本 章 内 容 的 学 习 ， 读 者 应 该 对 宝贝 详情 页 有 基础 认识 ， 能 够 设计 与 制作 PC 端 和 
无 线 端 宝贝 详情 页 。 
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学 习 目 标 


知识 目标 


。 了 解 宝贝 主 图 的 制作 要 求 及 设计 要 点 
。 了 解 直 通车 概念 及 展示 位 置 
。 了 解 钻 展 概念 及 展示 位 置 


技能 目标 


。 掌握 主 图 的 设计 要 点 及 制作 方法 

。 掌握 直通 车 推广 图 制作 要 求 及 制作 方法 
。 掌握 钻 展 图 设计 要 求 及 制作 方法 

。 掌握 店铺 二 维 码 的 创建 方法 

。 掌握 淘宝 视频 的 制作 方式 


完成 店铺 装修 及 宝贝 发 布 后 ， 许 多 卖家 就 等 待 买 家 自行 进 店 浏览 选 购 ， 但 是 这 样 的 话 往往 很 难 
产生 较 好 的 销量 。 为 了 避免 这 种 情况 ， 卖 家 需要 对 店铺 进行 推广 ， 通 过 推广 位 置 的 图 片 来 吸引 买 家 
是 效果 较 好 的 方法 之 一 ， 本 章 将 就 如 何 设计 点 击 率 较 高 的 店铺 推广 图 进行 详细 讲解 。 
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8.1 制作 高 点 击 率 的 主 图 


无 论 是 在 平台 上 还 是 店铺 中 ， 买 家 在 搜索 和 查看 商品 时 ， 最 先 看 到 的 就 是 宝贝 主 图 ， 
所 以 宝贝 主 图 的 好 坏 很 大 程度 上 影响 着 买 家 是 否 会 点 击 查看 商品 。 本 节 对 主 图 的 制作 要 求 、 
设计 要 点 以 及 制作 方法 进行 介绍 。 


8.1.1 主 图 的 制作 要 求 


在 PC 端 编辑 发 布 宝贝 时 ， 宝 贝 图 片 最 多 可 上 传 5 张 ， 最 少 要 一 张 。 其 中 第 一 张 图 片 
会 在 宝贝 搜索 页 面 中 显示 ， 也 就 是 主 图 ， 因 此 需要 重点 制作 ， 商 品 主 图 的 大 小 必须 控制 在 
500KB 以 内 。 

淘宝 宝贝 图 片 的 标准 尺寸 是 310 像素 x 310 像素 , 而 700 像素 x 700 像素 以 上 的 图 片 ， 
宝贝 详情 页 会 自动 提供 图 片 放大 镜 功 能 。 在 淘宝 中 ， 当 买 家 将 鼠标 光标 移动 到 宝贝 主 图 上 
即 可 查看 该 主 图 的 细节 ， 如 图 8-1 所 示 。 


Ta, 


四 轩 四 时 ee ey 


支付 时 42m 画 信用 卡 支付 国 集 分 宝 


诡 收藏 宝贝 (1146 人 气 ) 9 分享 


图 8-1 查看 商品 主 图 细节 


大 总 


京东 、 当 当 等 主 图 规格 为 800 像 素 x 800 像 素 。 
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8.1.2 ” 主 图 的 设计 要 点 


好 的 商品 主 图 能 够 提高 点 击 率 ， 从 而 达到 引流 的 目的 。 买 家 在 浏览 主 图 时 的 速度 一 般 
较 快 ， 所 以 ， 制 作 主 图 的 关键 就 是 让 主 图 有 足够 的 视觉 冲击 力 ， 可 以 让 它 在 众多 主 图 中 吸 
引 买 家 眼球 。 设 计 主 图 时 可 以 遵循 以 下 几 点 。 


1. 卖点 清晰 有 创意 


主 图 卖点 不 一 定 是 促销 内 容 ， 而 是 吸引 买 家 的 亮点 及 核心 竞争 力 ， 例 如 商品 的 款式 、 
形状 、 材 质 , 或 者 是 商品 的 价格 等 。 卖 点 清晰 是 指 买 家 的 目光 即使 一 扫 而 过 ， 也 能 快速 明 
白 商品 的 优势 是 什么 。 一 个 主 图 的 卖点 不 需要 多 ， 但 需要 直击 要 害 ， 以 最 直接 的 方式 吸引 
买 家 。 许 多 商品 的 卖点 是 大 同 小 异 的 , 这 时 就 需要 通过 优化 卖家 的 展示 方式 赢得 买 家 注意 。 
图 8-2 所 示 主 图 ， 通 过 商品 使 用 前 后 对 比 图 的 方式 ， 展 示 清 洁 剂 使 用 前 后 运动 奎 的 效果 ， 
从 而 吸引 买 家 关注 ; 图 8-3 所 示 主 图 ， 用 模特 展示 服装 时 尚 、 复 古 、 显 瘦 的 款式 ， 远 比 直 
接 摆 放 服装 更 能 勾 起 买 家 的 购买 欲 。 


图 8-2 ”证 动 鞋 清洁 剂 图 8-3 ”模特 展示 服装 主 图 


2. 图 片场 景 的 选择 


设计 图 片场 景 时 ， 选 择 不 同 的 场景 、 不 同 虚 化 程度 的 素材 ， 都 有 可 能 对 图 片 的 效果 产 
生 影响 , 从 而 影响 点 击 率 。 如 图 8-4 所 示 , 左 图 为 商品 搭配 了 景物 的 背景 ,但 背景 颜色 丰富 ， 
不 利于 突出 文案 ， 画 面 整 体 也 很 杂乱 ， 容 易 扰乱 买 家 视线 ， 使 主 图 效果 大 打折 扣 ; 而 右 图 
搭配 纯色 背景 ,恰好 清晰 地 展示 了 商品 ， 突 出 了 商品 的 品牌 和 价格 等 信息 。 


3. 商品 大 小 适中 
商品 过 大 则 显得 爱 肿 ， 过 小 则 不 利于 展现 细节 ， 难 以 突出 商品 的 主体 地 位 。 而 大 小 合 
适 的 商品 主 图 能 增加 浏览 时 的 视觉 舒适 感 ， 提 升 点 击 率 。 如 图 8-5 所 示 ， 左 图 的 数据 线 可 
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图 8-4 ”商品 图 片 背景 的 选择 


以 让 买 家 看 到 数据 线 的 细节 特征 及 柔韧 耐用 性 ， 极 大 提高 了 商品 的 直观 展示 效果 。 右 图 的 
数据 线 比 例 过 小 ， 商 品 主体 不 突出 ， 且 无 法 查看 细节 ， 容 易 被 买 家 忽视 。 


苹果 认证 线 
充电 不 弹 窗 


[re ome Dew] 


E 


图 8-5 ”商品 大 小 话 中 


4. 内 容 简洁 

买 家 在 搜索 商品 时 ,浏览 速度 较 快 ,因此 主 图 传达 的 信息 越 简单 .明确 就 越 容易 被 接受 。 
产品 放置 人 杂乱、 产品 数量 过 多 、 文 案 信 息 过 多 、 背 景 杂 乱 、 水 印 夸 张 等 都 会 阻碍 信息 的 传 
达 。 图 8-6 所 示 两 图 都 为 榨 汁 机 主 图 ， 左 侧 设 计 简 洁 大 气 ， 符 合 该 产品 的 品牌 特征 ， 少 量 
的 文本 很 好 地 阐述 了 其 卖点 。 而 右 图 用 了 大 量 文本 说 明 榨 汁 机 的 优点 ， 一 般 情况 下 商品 描 
述 越 多 ， 单 件 宝贝 就 越 不 突出 ， 图片 整 体 越 不 清楚 。 


Gidea 
/顺丰 包 邮 / 双 标 配置 一 机 多 用 
1000W 大 功率 县 浅 /各 车/ 采 昆 ; 沙 冰 / 洒 护 /和 会 都 可 党 
高 效 榨 汗 


果 济 分 离 


¥ 


3 A 
Y660 德国 博朗 全 国联 保 
图 8-6 内 容 简洁 
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5. 宝贝 清晰 度 及 细节 
作为 商品 页 面 中 的 主 图 ， 清 晰 度 是 最 重要 的 ， 如 果 主 图 中 的 宝贝 不 清晰 ， 会 使 其 效果 
大 打折 扣 。 所 以 制作 主 图 时 要 保证 主 图 中 宝贝 的 清晰 度 ， 让 买 家 能 够 了 解 宝贝 的 细节 。 


6. 使 用 “ 嗪 头 ”文字 

使 用 一 些 “ 嗪 头 ”文字 ， 也 就 是 将 一 个 容易 被 买 家 接受 的 卖点 通过 放大 等 方式 放置 在 
图 片 中 ,增加 说 服 力 , 图 8-7 所 示 直 通车 图 片 使 用 了 “0 糖 0 卡 , 喝 出 轻 盘 ”作为 矿泉 水 的 “ 唆 
头 ”吸引 消费 者 ; 图 8-8 所 示 为 某 款 山楂 条 直通 车 图 片 ， 该 图 片 使 用 了 “0 添加 、 纯 天 然 、 
无 色素 ”的 “喷头 ”文字 吸引 买 家 关注 。 


图 8-7 矿泉 水 直通 车 图 片 图 8-8 山楂 条 直通 车 图 片 


8.1.3 制作 主 图 


下 面 为 “大 魔 树 ”女装 店铺 的 一 款 雪 纺 衫 设计 主 图 。 京 东 和 当当 网 的 主 图 都 是 800 像 
素 x 800 像素 ， 为 了 使 主 图 更 好 地 适 配 其 他 网 站 ， 本 案例 将 按照 800 像素 x 800 像素 的 尺 
寸 制 作 宝 贝 主 图 ， 制 作 后 的 主 图 如 图 8-9 所 示 。 其 操作 步骤 如 下 。 


闻 E 88.80 
本 用 各 品 大 促 开 抢 


| 》 
驻 Ws a 小 清新 风 荷 叶 边 雪 纺 短视 


图 8-9 宝贝 主 图 
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GE 新建 一 个 “宽度 ”为 800 像素 、“ 高 度 ” 为 800 像素 “分辨 率 ”为 72 像素 / 
英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “宝贝 主 图 ”， 如 图 8-10 所 示 。 


| 出 除 预 设 (D)… 


分 辨 硅 (R): 
颜色 模式 (M): 
背景 内 容 (C): 


冯 ) 高 级 


图 8-10 ”新 建文 档 


GS 置 人 素材 图 片 “ 主 图 背景 jpg”， 如 图 8-11 所 示 。 

GE 置信 素材 图 片 “ 坚 条 纹 上 衣 .png”"， 将 其 缩小 并 放置 在 合适 位 置 ， 如 图 8-12 
所 示 。 单 击 图 层 下 方 “图 层 样式 ” 按 钮 国王 设置 图 层 样式 ， 为 其 添加 投影 ， 参 数 如 图 8-13 
所 示 ， 效 果 图 如 图 8-14 所 示 。 


图 8-11 置 入 主 图 背景 图 片 图 8-12 置 入 素材 


EY 选择 “和 矩形 工具 ” 国 几 , 绘制 一 个 大 小 为 307 像素 x 82 像素 的 和 矩形， 颜色 
填充 为 “红色 ”( 了 :242，G:33，B:32 )， 在 其 上 方 输入 相关 文本 ， 字 体 为 “Adobe 黑体 
Std”， 如 图 8-15 所 示 。 
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图 8-14 置 入 素材 


投影 


结构 


混合 模式 人 6): 正片 释 底 - 


图 设计 


不 通明 度 O): 一 2 一 画 。 |% 
负 度 (A: ( ) 


120 ” 度 回 使 有 全 局 光 (G) 


图 8-13 ”投影 参数 


爆 品 大 促 开 抢 


图 8-15 ”输入 文本 


人 GE 根据 Step4 的 方法 在 红色 矩形 下 方 绘制 一 个 大 小 为 379 像素 x 43 像素 的 矩形 ， 


白色 "， 输 入 相关 文本 ， 如 


图 8-16 所 示 。 


BY》 最后， 在 红色 矩形 的 上 方 ， 输 入 价格 文本 ， 单 击 


医 王 设置 图 层 权 


图 层 下 方 “ 


区 


层 样式 ”按钮 


# 式 ， 为 其 添加 描 边 ， 参 数 如 图 8-17 所 示 ， 最 终 效果 如 图 8-16 所 示 。 
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图 8-17 ” 描 这 参数 


8.2 ”直通 车 推广 图 设计 


淘宝 直通 车 是 阿里 巴巴 推出 的 一 种 搜索 竞价 推广 工具 。 卖 家 通过 对 直通 车 账户 的 优化 ， 
可 以 使 店铺 的 商品 在 淘 包 搜索 结果 中 优先 展示 , 从 而 获得 点 击 浏览 。 下 面 对 直通 车 的 概念 、 
直通 车 图 片 设计 原则 及 直通 车 图 片 制作 方法 进行 介绍 。 


244 


第 8 章 | 店铺 推广 图 设计 


8.2.1 ”认识 直通 车 


直通 车 是 一 种 展示 免费 、 点 击 扣 费 、 采 用 竞价 形式 排名 的 付费 广告 。 卖 家 可 以 为 推广 
的 每 一 个 商品 设置 200 个 关键 词 , 并 针对 每 个 关键 词 自由 定价 。 值 得 注意 的 是 , 竞价 越 高 ， 
商品 推广 位 置 越 靠 前 。 卖 家 如 果 想 推广 某 款 宝 贝 , 需要 给 宝贝 设置 相应 的 创意 图 、 关 键 词 、 
出 价 以 及 宝贝 推广 标题 等 ， 当 买 家 在 淘宝 网 搜索 关键 词 或 按照 类 目 分 类 进行 浏览 时 ， 推 广 
的 宝贝 就 会 出 现在 相应 的 展示 位 ， 买 家 点 击 后 产生 扣 费 ， 不 点 击 不 付费 。 

直通 车 推广 形式 包括 关键 词 推广 和 定向 推广 ,不 同 的 推广 形式 的 展示 位 置 也 不 相同 ， 
具体 介绍 如 下 。 


1. 关键 词 推广 
关键 词 推 广 是 直通 车 主要 的 推广 形式 。 关 键 词 推广 展示 位 有 三 种 类 型 ， 分 别 为 关键 词 


由 索 结果 列表 页 、 类 目 搜索 结果 列表 页 、 热 搜 词 搜索 结果 列表 页 。 例 如 ， 在 淘宝 PC 端 首 
页 中 直接 输入 需要 搜索 的 宝贝 关键 词 ， 搜 索 结果 页 面 第 一 排 第 一 个 标 有 “掌柜 热卖 ”宝贝 


下 方 标 有 掌柜 热卖 一 栏 中 的 5 个 宝贝 展示 的 位 置 ， 如 图 8-19 所 示 。 


宝 
淘 网 宝贝 ” 旅行 箱 [ 搜索 


上 代表 片 训 能 搜 由 芝 哈 1 


所 有 分 类 收 起 谢 选 
Zosedl 仿 斯 登 。 。 CARTELO/ 卡 帝 攻 名 鱼 。 。 M9/ 财 久 。 。 GENVAS/ 胃 毕 什 。 。 90 分 条 选 。 更 多 


broman bags/ 不 荣 到 Dream tmvalier/ 掉 旅 者 z0D/ 慌 级 安 。。 开 也 


1 于 时 时 1 对 2 时 ad 4 
宙 友 疹 。。 田 加 小 汪 新。 夏目 风 出 痊 必 备 。。 子 量 箱 。 游 ] 人 性 条 计 ”更 多 
功 采 包 | 拉杆 福 。 旅行 定 (无 拉丁 ) 


请 条件 村 内 风格 上 市 时 间 着 向 性 别 相关 分 克 


拉丁 箱 行李 箱 。 小 水 旅 全 箱 。 旅行 畏 布 村 。 放行 闭合 机。 儿童 放行 箱 拉杆 旅行 箱 。 画 放行 冯 。 直行 着 
综合 排 床 。 销量 信用 价 俗 = 发 山地 EE Yi100 > 
包 邮 站 冉 渤 退 泊 运 引 答 口 货 到 付款 口 产品“ 口 ] 公益 全 风口 二 手 口 天 痪 更 8 会 并 月 攻 宝 由 


半 349.00 。 42545 人 ij 


加 小米 言 方 衣 入行 9 4t 委 庆生 各 万 后 四 拉杆 
入 条 生地 往 女 轴 20 密码 箱包 24 十 


恬 ¥199.00 


加 © 


图 8-18 关键 词 搜索 结果 列表 页 的 展示 位 
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拿 柜 热卖 。 旅行 靖 拉 杆 达 。 旅行 入 罗拉 村 着 认 行 往 。 该 行 秆 之 。 旅行 旺 万 向 近 ”省 旗 行 注 。 20 寸 放行 浓 。 对 寸 放行 交 学 生 旅行 省 走 也 要 二 现 在 这 里 


Ey  ¥798.00 加 
有 要 负 和 相 办 学 生 be 
24 和 朗科 


yok 让 


图 8-19 ”关键 词 搜 索 结 果 列 表 页 底部 的 5 个 展示 位 
此 外 ， 直 通车 还 包括 无 线 端 搜 索 结果 页 展示 位 。 搜 索 某 关 键 词 后 ， 宝 贝 右上 角 带 有 
Hot 字样 的 即 直 通车 推广 宝贝 ， 如 图 8-20 所 示 。 


所 ”条 纹 西 服 女 韩国 


生 正装 女 套 装 面试 学 生 韩 版 气 
质 条 纹 西装 工作 服 


Y228 476 人 付款 
进 店 > 


复古 双 排 扣 格 子 休闲 毛 呢 小 西装 


[Eshion) [E523] 


279 oo 
/| 进 店 > 


图 8-20 ”无线 端 关 键 词 搜 索 展示 位 


2. 定向 推广 展示 位 


定向 推广 依靠 淘宝 网 庞大 的 数据 库 ， 构 建 买 家 的 兴趣 模型 。 系 统 能 从 细 分 类 目 中 抓 取 
那些 特征 与 买 家 兴趣 点 相 匹配 的 推广 宝贝 ， 并 将 宝贝 展示 在 目标 客户 浏览 的 网 页 上 ， 锁 定 
潜在 买 家 ， 实 现 精准 营销 。 例 如 ， 一 个 女性 买 家 想 购买 一 件 甜美 风 的 连衣裙 ， 那 么 买 家 在 
搜索 进入 的 定向 推广 页 面 时 ， 系 统 会 在 连衣裙 类 目 里 选 出 具有 甜美 风 特 征 的 宝贝 展示 给 此 
买 家 。 定 向 推广 展示 位 较 多 ， 常 见 的 有 以 下 几 种 。 
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。 阿 里 旺旺 中 : 登录 阿里 旺旺 后 , 单 击 “我 的 焦点 ”, 该 页 面 顶部 导航 “热卖 ” 下方 的 “ 热 
卖 单 品 ” 即 定向 推广 展示 位 ， 如 图 8-21 所 示 。 


今日 活动 ”天 滴 电 器 城 。” 票 划算 。 海 全 而 。 淘宝 斌 用。 拍 实 


床 扒 | 河 宅 矶 | 客厅 灯 | 沙发 | 宣 痊 | 东 几 | 椅子 | 抱枕 | 大 阅 径 | 电 及 居 


¥257 yx588 ¥328 
ee gp Wg 


¥68 ¥+09 ¥99.9 x499 ¥349 3558: ¥129 x253 ¥68 ¥155 
PD HOME 蛙 秋 chic 条 。。 充 苏 日 记 光 影星 河 九 色 。 2018 秋 新 入 名 针织 祖 情 .。 云 思 木 于 chic 币 妖女 装 有 mn 
月 的 1383 月 钢 26 月 岗 166 


图 8-21 ”阿里 旺旺 定向 推广 展示 位 
。 已 买 到 宝贝 下 方 : 选择 淘宝 首页 导航 栏 中 的 “我 的 淘宝 ”一 “已 买 到 宝贝 "， 已 买 
到 宝贝 页 面 最 下 方 的 “热卖 单 品 ”一 栏 即 定向 推广 展示 位 ， 如 图 8-22 所 示 。 


= 以 古村 米 兢 所 未 中 了 组 全 到 。。 436.90 1。 申请 售后 过 加 评论 
ee 让 条 山 楼 湿 绕 反 气 意 水 昌 的 
去 回 图 加 


目 全 去 。 批量 请 认 夏 守 圆 : : ，: 19 ME 1 页 MW 


热卖 单 品 二 加 芒 edin 补 这 于 长 宙 误 真丝 请 这 家 说 水 允 说 小 黑 省 医 共 实名 妖 风 广告 笔 红 漳 子 背 贡 灌 刷 各 痢 雪 妨 庄 男士 包 乔 #5 和 7 的 更 多 》 


Noussy 


+ 899.00 +*i4s + 257.00 xsss BE +369.00* [a 

本 2019 和 并 及 FUT 双语 计 必 江东 is= 旺 村 1970d 布 半 jesyina2015 大 季 有 人 本 东 革 有 0 这 局 

:1 a: 72 GE [LE 加 Fn 

得 人 征 描 肝 和 好 岂 几 二 宙 和 的 家 , 尘 训 时 我 的 同事 站 地 个 “地 归 名 让 汪 点 至 大 的 直 线 3 吉 ; 具 | 
Bx! 和 弹性 的 面 村 信 得 衣 和 的 内 二 和 定 3 


@e 4 > 换 - 组 


图 8-22 已 购买 宝贝 中 的 定向 推广 展示 位 


。 购 物 车 下 方 : 淘宝 账户 中 “购物 车 ”下 方 的 “掌柜 热卖 ” 即 定向 推广 展示 位 ,如 图 8-23 
所 示 。 
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成 功 出 除 4 件 宝 风 ， 如 有 误 ， 可 撤销 本 次 虽 除 


全 选 。。 册 宁 于 秩 戏 主 贝 。 移入 中 莽 夫 。 分 村 己 和 商品 0 件 合计 (不 含 运费) : 和 | 


¥680 Bi ¥89.00 “mm ¥58.00 “2 EB ¥449.00 «+» 

雅 讨 兰 郁 面 部 精华 线 雕 精华 索 专 研 哇 塑 胖 妹 姑 显 区 针织 冻 加 肥 j 加 大 码 女装 厅 教 卫衣 这 帆 2018 亲 教 春 秋 女 长 让 韩 版 训 愉 情 全 棉 麻 毛 印 花 四 症 喜 美式 床上 用 品 

A: 2 加 ae， :9 Em i 7; [Ta 
LL 


图 8-23 ”购物 车 页 面 下 方 的 定向 推广 展示 位 


8.2.2 ”直通 车 图 片 制作 要 求 


优质 的 直通 车 广告 图 可 以 吸引 买 家 的 点 击 ， 增 加 直通 车 的 点 击 率 ， 所 以 能 否 快速 打动 
消费 者 点 击 是 直通 车 能 否 成 功 引流 的 关键 。 直 通车 图 片 的 制作 要 点 与 宝贝 主 图 的 制作 要 点 
基本 相同 ， 但 除 上 述 主 图 制作 要 点 外 ， 还 要 注意 以 下 几 点 。 


1. 分 析 图 片 的 差异 化 

确定 直通 车 推广 所 投放 的 位 置 (第 几 页 ， 第 几 个 商品 位 置 )， 对 该 位 置 附近 的 直通 车 
图 片 进行 分 析 。 主 要 分 析 素 材 选 择 、 色 彩 、 构 图 、 文 案 等 ， 找 出 它们 的 共同 点 ， 然 后 走 差 
异化 路 线 。 例 如 ， 竞 争 对 手 的 图 片 以 深 色 系 为 主 ， 那 么 就 需要 使 用 浅 色 系 来 突出 自己 的 广 
告 图 片 ， 这 样 可 以 迅速 吸引 买 家 注意 。 


2. 突出 增值 服务 


突出 增值 服务 ， 如 包 邮 、 货 到 付款 、 终 身 质保 、 保 修 包 换 、 上 门 安装 、 赠 品 等 ， 可 以 
增加 消费 者 的 兴趣 ， 让 消费 者 觉得 店铺 服务 贴心 有 保障 。 图 8-24 所 示 即 为 一 款 旅行 箱 的 
直通 车 推广 图 ， 图 中 使 用 了 “好 礼 相 送 、 终 身 质保 ” “空运 包 邮 ” 字 样 的 增值 服务 ， 消 除 
了 消费 者 对 质量 问题 及 运输 问题 的 担心 。 

3. 添加 好 评 及 销量 字样 

某 款 商品 拥有 很 大 的 销量 及 大 量 的 好 评 ， 这 无 疑 是 最 强 有 力 的 卖点 。 将 文字 好 评 的 点 
突出 放大 ,利用 可 靠 的 数据 去 表现 商品 的 特点 ,可 以 提高 点 击 率 。 图 8-25 所 示 商 品 使 用 的 “ 销 
量 突破 25 万 把 ”就 充分 利用 了 销量 数据 ， 突 出 商品 的 受 欢迎 程度 。 
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图 8-24 ”使 用 增值 服务 图 8-25 ”使 用 好 评 及 销量 数据 


4. 合理 使 用 文字 

告 文字 说 明 不 宜 过 多 ， 而 且 要 符合 淘宝 发 布 规 则 ， 还 应 符合 广告 法 ， 不 得 使 用 项 级 
词语 ， 例 如 “最 好 "”“ 史 上 第 一 ”等 。 不 得 夸大 商品 特点 ， 例 如 一 款 普通 的 车 内 挂 饰 ， 却 
标 上 “具有 使 人 头脑 清醒 ”的 文字 , 这 样 很 容易 引起 买 家 投诉 和 差 评 。 文 字数 量 也 应 适中 ， 
过 多 的 文字 会 使 人 产生 疲劳 感 。 


5. 使 用 正确 的 图 片 尺寸 


直通 车 图 片 尺寸 通常 都 是 正方 形 的 ， 一 般 建议 使 用 400 像素 x 400 像素 以 上 尺寸 ， 最 
常用 的 尺寸 是 800 像素 x 800 像素 。 直 通车 推广 图 不 建议 使 用 边框 


8.2.3 ”制作 直通 车 图 片 


在 直通 车 中 添加 推广 图 片 时 ， 可 以 在 5 张 宝 贝 图 片 中 选择 一 张 作 为 直通 车 推广 图 片 。 
若 这 5 张 图 都 不 符合 直通 车 推广 的 制作 要 求 ， 则 可 以 重新 设计 上 传 一 张 图 片 作为 直通 车 推 
广 图 。 

图 8-26 所 示 图 片 即 为 重新 设计 的 某 款 旅行 箱 的 直通 车 推广 图 ， 点 击 进 入 该 宝贝 详情 
页 后 ， 可 以 看 到 该 宝贝 展示 的 5 张 图 片 都 与 直通 车 推广 图 不 同 ， 如 图 8-27 所 示 。 


图 8-26 ”旅行 箱 直通 车 推广 图 


249 


RAR 


店 美工 设计 实 操 配色 、 布 局 、 修 图 、 装 修 


思 昔 尔 PC 商务 拉杆 逢 男 电 脑 登 机 箱 20 寸 旅行 菠 包 女 行 李 箱 万 向 轮 拖 箱 
菁 天 记 芒 衬 TSA 雪 码 并 荐 全 万 向 轮 


=esa = 


全 y4508.00 4708.09 
sf ¥498.00-568.00 
至 福 主 案 州 至 北京 ~ 快递 : 0.00 

Ra 196 SF 1945 BF 2498 
R209 (6 ,这 | | 2 和 ( 收 语 Fe 这) 
24 寸 ( 收 戌 后 下 车 , 送 笔 大 ) 


有 负 病 轴 


8 SS 0 


图 8-27 ”旅行 箱 商品 详情 页 


性 汪 正直 保 下 。。 外 坟 有 风云 栓 。。 七 天 于 如 吃 。。 支付 方式 


8.3 ”钻石 展位 推广 图 设计 


钻石 展位 是 淘宝 系统 推出 的 男 一 种 付费 广告 ， 主 要 依靠 图 片 创 意 吸 引 买 家 点 击 ， 获 得 
客户 流量 ， 所 以 设计 出 一 张 好 的 钻石 展位 图 非常 重要 。 本 节 将 详细 讲解 钻石 展位 推广 图 的 
设计 技巧 。 


8.3.1 ”认识 钻石 展位 


钻石 展位 简称 “ 钻 展 "， 是 淘宝 网 推出 的 另 一 种 付费 推广 方式 ， 需 要 卖家 出 资 购买 外 
展 展位 ， 才 能 放置 活动 推广 图 片 。 钻 石 展位 是 按照 展示 收费 的 ， 即 广告 所 在 的 页 面 展示 在 
用 户 面前 一 次 就 计 费 一 次 。 与 直通 车 不 同 的 是 , 钻 展 更 偏向 于 人 群 , 属于 大 范围 投放 广告 ; 
直通 车 定向 推广 更 偏向 于 兴趣 点 ， 由 购物 意图 圈 人 。 

钻 展 为 卖家 提供 了 很 多 网 站 优质 展位 ， 根 据 其 展示 位 置 的 不 同 ， 钻 石 展 位 可 以 分 为 站 
内 展示 位 和 站 外 展示 位 。 

站 内 展示 位 主要 包括 天 猫 首页 ( 如 图 8-28 所 示 )、 淘 宝 首页 ( 如 图 8-29 所 示 ) 以 及 
各 大 频道 大 尺寸 展位 ( 如 图 8-30 所 示 )、 无 线 淘宝 ( 如 图 8-31 所 示 ) 等 。 例 如 ， 淘 宝 首 页 
焦点 钻 展 图 ， 位 于 淘宝 首页 的 上 方 ， 该 位 置 的 2~4 张 轮 播 图 为 钼 展 展示 位 ， 是 进入 淘宝 
首页 后 的 视觉 中 心 。 淘 宝 首 页 焦点 钻 展 图 标准 尺寸 为 520 像素 x 280 像素 , 由 于 尺寸 较 大 ， 
能 够 完全 展示 商品 与 文案 ， 因 此 该 展位 的 价格 最 贵 。 

站 外 展示 位 即 卖家 投放 的 钻 展 广告 展示 在 淘宝 站 外 其 他 网 站 上 ， 如 新 浪 微 博 、 优 酷 、 
今日 头条 等 网 站 上 面 ， 如 图 8-32 所 示 。 
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出 天 演 基 作出 天 党 加 际 天 和 全 电 志 二 所 生 医生 全 业 了 总 力 四 eR 光 行 共生 风 


2 
无 极 科 技 环保 材质 


一 卯 桦 结构 工艺 精髓 一 


2 3 天 沽 - 安 装 二 5 全 和 


图 8-28 天 猫 首页 钻 展 位 置 


淘宝 网 。 站 


Taobao.com 


天 猜 “” 更 划算 ”天 强直 市 


学 习 / 卡 党 /本 地 可 和 
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人 潮流 家 居 用 品 
上 uy 大 牌 家 电 中 秋 促 ml no | 
抢 百 万 券 礼 
RE or 
天 猫 聚 划算 天 猫 国际 饿 了 猫 超市 
bd 飞 猪 ， 拍卖 
淘宝 加 同 入 秋 后 外 套 别 乱 买 ， 投 资 这 三 件 就 网 
头条 E 而 偷 师 Pony 大 神 ， 一 只 口红 化 出 三 3 


图 8-31 ”淘宝 无 线 端 首页 钻 展 位 置 


8.3.2” 钻 展 图 的 设计 要 求 


钻 展 图 的 尺寸 虽然 丰富 ， 但 设计 要 求 和 直通 车 等 图 片 是 相同 的 ， 常 见 的 要 求 包括 主 图 
突出 、 目 标明 确 、 因 地 制 宜 和 形式 美观 ， 下 面 进行 详细 讲解 。 


1. 主题 突出 

钻 展 的 主题 可 以 是 突出 商品 、 创 意 方案 ， 还 可 以 是 买 家 诉求 。 突 出 主 图 才能 吸引 更 
多 买 家 点 击 ， 因 此 钻 展 图 的 主题 一 定 要 有 亮点 ， 这 样 才能 够 吸引 更 多 的 买 家 点 击 浏览 ， 如 
图 8-33 所 示 。 


安静 低 耗 


规划 浊 拖 / 马 字 生 天 1 帮 入手 、 


图 8-33” 主 图 突出 
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2. 目标 明确 

直通 车 主 图 更 多 针对 单 品 引 流 ， 目 标 较 单一 。 但 钻 展 投放 的 目的 有 很 多 种 ， 如 通过 外 
展 上 新 ， 通 过 钻 展 引流 到 聚 划算 ， 通 过 钻 展 预 热 大 型 活动 ， 以 及 通过 钻 展 进行 品牌 形象 宣 
传 等 。 所 以 ， 在 钻 展 图 的 设计 制作 中 ， 首 先 要 明确 自己 的 营销 目标 ， 针 对 目标 进行 素材 的 
选择 和 设计 ， 这 样 才能 保证 点 击 率 和 转化 率 ， 如 图 8-34 所 示 。 


Ps rie 


BD “了 立 减 800 


图 8-34 ”目标 明确 


3. 因地制宜 

钻 展 的 位 置 决定 了 图 片 尺 十 的 大 小 ,不同 钻 展位 置 所 针对 的 人 群 也 不 同 ， 其 消费 特征 
和 兴趣 点 也 不 同 。 制 作 钻 展 图 要 根据 位 置 、 尺 十 等 信息 调整 文案 ， 并 采取 合适 的 表达 方式 
展示 产品 特点 ， 图 8-35 所 示 即 为 PC 端 与 无 线 端 以 及 微 博 首 页 的 钻 展 图 


元 抢 广州 酒家 月 饼 礼盒 
爆 款 直 降 限 时 


吃 出 } 
满 599 减 120 / 民 


爆 款 抢 第 2 件 5 折 


eee ‘edge 


(b) 无 线 端 钻 展 图 


图 8-35 不同 位置 的 钻 展 图 
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OPPO R17 


今日 开 售 


立即 购买 OPPO R17 > 


(OW 


(O) 微 博 首页 钻 展 图 
图 8-35 ( 续 ) 


8.3.3 ”制作 钻 展 图 


钻 展 图 的 目的 是 为 了 在 有 限 的 空间 中 更 多 地 展示 商品 特色 ,吸引 买 家 点 击 。 特 别 是 在 
同类 产品 相 较量 时 ， 钻 展 图 的 美感 就 成 为 了 决胜 的 关键 。 下 面 使 用 淘宝 首 焦 钻 展 图 对 “大 
魔 树 ” 女 装 店铺 的 女士 短 袖 进 行 推广 。 该 钻 展 图 按照 其 标准 尺寸 520 像素 x 280 像素 进行 
设计 ,使 用 粉色 背景 来 吸引 女性 消费 者 ， 然 后 使 用 咕 头 文字 ， 吸 引 消费 者 点 击 。 图 8-36 
所 示 为 设计 后 的 钻 展 图 。 具 体操 作 步 又 如 下 。 


150/ 合 / 么 / 精 / 美 / 彰 / 品 
寺 惠 专区 
十 二 EF 
2018 CLEARANCE ZONE 
限时 9.9 元 起 a 


超 值 开 抢 ! 


六 适 动 时 间 :10.8-10.10 


图 8-36 ” 钻 展 图 
人 ES 新建 一 个 “宽度 ”为 520 像素 、“ 高 度 ”为 280 像素 、“ 分 辩 率 ”为 72 像素 / 
英寸 “背景 内 容 ” 为 白色 的 文件 ， 并 命名 为 “ 钻 展 图 "， 如 图 8-37 所 示 。 
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图 8-37 ”新 建文 档 
GE 置信 素材 图 片 “ 钻 展 图 jpg"， 如 图 8-38 所 示 。 


E 
(ro = 


图 8-38 ” 置 入 素材 图 片 


6 机》 依次 置信 如 图 8-39 所 示 的 “sale.png”“ 衣 服 模 特 png” 等 素材 图 片 ， 调 整 位 
置 如 图 8-40 所 示 


国 za 
EE 
二 下 乐 


量 计算 机 
鱼 本 ie 可 本 (c 
加 软件 (Dj 
局 文 全 


ns 


Dp 3 个 对 象 


图 8-39 ”素材 展示 
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E 

z A 

(ro Ee 
图 8-40” 置 入 素材 图 


SEZ》 选择 “ 横 排 文字 工具 ” 辆 和 输入 “特惠 专区 ”等 相关 文本 ， 字 体 为 “ 张 海 山 
锐 线 体 简 ”"， 颜 色 及 大 小 如 图 8-41 所 示 。 


150/ 余 / 款 / 精 / 美 / 星 / 品 


特惠 专区 


2018 CLEARANCE ZONE 


CE 
| 


多 
(rh Baad 


图 8-41 输入 相关 文本 


人 GE》 远 择 “ 算 形 工具 ” 国 , 绘制 一 个 大 小 为 233 像素 x 22 像素 、 填 充 为 “红色 ” 
(R:219，G:135，B:133 )、 描 边 为 “无 ”的 矩形 ， 按 Ctrl+J 组 合 键 复制 该 图 层 ， 将 其 向 下 
移动 ， 如 图 8-42 所 示 。 

BY 输入 剩余 文本 ， 中 文字 体 为 “ 张 海 山 锐 线 体 简 ”、 英 文字 体 为 “宋体 "， 颜 色 
及 大 小 如 图 8-43 所 示 。 最 后 选中 所 有 文本 图 层 以 及 和 矩形 图 层 ， 单 击 属性 栏 上 方 的 “水 平 
居中 对 齐 ” 按 钮 图 对 选中 图 层 进行 居中 对 齐 操作 。 至 此 ， 宝 贝 钻 展 图 制作 完成 ， 效 果 如 
图 8-36 所 示 。 


150/ 余 / 款 / 精 / 美 / 象 / 品 


a a 辐 
EE 特惠 专区 
特惠 专区 


2018 CLEARANCE ZONE 限时 9.9 元 起 
| 站 信 开 愉 1 
Ee == = meso 
2 4 

图 8-42 ”复制 矩形 效果 图 8-43 ”输入 剩余 文本 


256 


第 8 章 | 店铺 推广 图 设计 


8.4 ”店铺 二 维 码 的 制作 


二 维 码 是 店铺 宣传 推广 的 重要 方式 之 一 ， 可 以 使 买 家 更 加 方便 快捷 地 进入 店铺 和 查看 
商品 。 淘 宝 店铺 可 以 放置 店铺 的 二 维 码 ， 让 买 家 通过 扫描 二 维 码 的 方式 关注 店铺 ， 增 加 店 
铺 的 人 气 ， 还 可 以 在 宣传 册 中 放 入 二 维 码 以 促进 消费 者 二 次 购买 。 本 节 对 二 维 码 的 应 用 以 
及 创建 方式 进行 介绍 。 


8.4.1 ”店铺 二 维 码 的 应 用 


淘宝 为 卖家 提供 了 二 维 码 在 线 生 成 工具 , 可 以 将 卖家 的 店铺 或 商品 的 “手机 浏览 链接 ” 
转化 成 二 维 码 ， 卖 家 可 以 将 这 些 二 维 码 印 制 在 包装 
上 、 优 惠 券 中 或 放 和 人 导航 条 上 ， 利 用 优惠 信息 引导 
消费 者 二 次 购买 。 如 图 8-44 所 示 即 二 维 码 在 快递 包 
庄 上 的 应 用 。 

合理 地 利用 二 维 码 可 以 为 卖家 带 来 意 想不到 的 
订单 回报 ， 而 现实 生活 中 的 店铺 二 维 码 有 哪些 作用 
呢 ? 下 面 对 这 些 作 用 分 别 进行 介绍 。 

。 帮助 促销 : 淘宝 卖家 可 以 将 二 维 码 印 制 在 商品 

包 庄 的 宣传 物 上 ， 如 优惠 券 、 宣 传 册 ， 将 这 些 

东西 放置 在 包 庄 中 ， 吸 引 买 家 通过 二 维 码 进入 图 8-44 ”二 维 码 的 应 用 

店铺 产生 二 次 购买 。 

。 快 速 收藏 店铺 : 卖家 还 可 以 在 手机 店铺 和 详情 页 中 贴 出 二 维 码 ， 让 买 家 可 以 使 用 手 

机 快速 收藏 ， 方 便 买 家 随时 随地 光顾 店铺 。 

。 促进 活动 宣传 : 淘宝 买 家 通过 手机 上 的 二 维 码 识别 软件 ， 扫 描 卖 家 的 淘宝 二 维 码 ， 

可 以 直接 找到 卖家 的 促销 活动 、 店 铺 首页 和 宝贝 单 品 等 信息 ， 省 去 搜索 或 输入 网 址 

的 麻烦 。 

。 促进 买 家 再 次 购买 : 卖家 还 可 以 在 自己 的 商品 上 放置 相应 的 二 维 码 ， 方 便 有 需求 的 

买 家 再 次 购买 。 


8.4.2 ”店铺 二 维 码 的 创建 


在 淘宝 店铺 中 运用 二 维 码 需要 先 创建 二 维 码 ， 二 维 码 可 在 买 家 中 心 后 台 进行 设置 。 本 
案例 将 使 用 “手机 淘宝 店铺 ”中 的 “ 码 上 淘 ” 创 建 店铺 二 维 码 ， 具 体操 作 如 下 。 


257 


RR NNN 


店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 

(SS 在 首页 中 登录 商家 账号 ,进入 “卖家 中 心 ”页 面 ,在 “店铺 管理 ”中 单 击 “ 手 
机 淘宝 店铺 ”链接 ,进入 “手机 淘宝 店铺 ”页 面 , 在 右 侧 页 面 中 单 击 “ 码 上 淘 ” 界 面 的 “ 进 
入 后 台 ” 超 链接 ， 如 图 8-45 所 示 。 


br 无 线 店 铺 


立即 装修 


图 8-45 手机 淘宝 店铺 后 台 


ES 进入 “ 码 上 淘 ” 后 台 ， 此 时 左 侧 的 “创建 二 维 码 ” 栏 中 显示 了 3 种 创建 二 维 
码 的 方式 :“ 通 过 工具 创建 ”“ 通 过 链接 创建 ”和 “通过 宝贝 创建 "， 如 图 8-46 所 示 。 


合 首页 


创建 二 维 码 合 


通过 工具 创建 


通过 链接 创建 


通过 宝贝 创建 


图 8-46 ” 码 上 淘 后 自 导 航 栏 
GE》 六 里 单 击 “ 通 过 链接 创建 "选项 ,此 时 右 侧 将 打开 “通过 链接 创建 二 维 码 "页 面 ， 
复制 需要 制作 二 维 码 页 面 的 链接 ， 本 案例 使 用 的 是 店铺 首页 链接 ， 将 链接 粘贴 至 “二 维 码 
页 面 链 接 ” 文 本 框 中 ， 并 单 击 “ 下 一 步 ” 按 钮 ， 如 图 8-47 所 示 。 


通过 链接 创建 一 维 码 
BB @ 
通过 工具 创建 模 定 扫 码 内 容 关联 洽 广 生 送 创建 成 功 
和 通过 适 控 8l 建 
pi 
通过 圭 贝 位 
ea- O Le | 


图 8-47 ”通过 链接 创建 二 维 码 
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人 ES 进入 “关联 推广 渠道 ”页 面 ， 给 该 二 维 码 进行 命名 ， 填 写 在 “二 维 码 名 称 ” 


文本 框 中 ; 在 “渠道 标签 ” 
一 步 ”按钮 ， 如 图 8-48 所 示 。 


栏 中 ,选择 标签 的 显示 方式 , 这 里 选择 “宣传 彩 页 ”"。 单 击 “ 下 


关联 推广 江道 
二 维 码 名 称 * | 店铺 首页 二 维 码 | 
当道 标签 |。 商品 包装 物流 包 训 宣传 彩 页 


推广 浅 道 就 旺 一 维 码 的 张贴 位 置 , 如 : 包裹 , 诲 报 等 


图 8-48 ”关联 推广 渠道 设置 
进入 “创建 成 功 ” 页 面 ， 该 页 面 中 显示 了 普通 二 维 码 和 视觉 码 两 种 效果 ， 这 


里 选择 普通 二 维 码 ， 然 后 拖 动 滑 块 调整 二 维 码 尺寸 ， 


所 示 。 


7 
关联 推广 源 道 

二 给 码 名 ”店铺 首页 一 维 码 

推广 光 遵 【了 默认 当道 


二 维 码 
车 通 二 维 码 : 共 包 合 1 个 二 维 码 


完成 后 单 击 “ 美 化 ”按钮 ， 如 图 8-49 


创建 成 功 


视 党 码 ; 这 是 全 球 独创 的 视觉 码 ， 快 来 试 试 | 


忆 呈 ste 
RJ: —(®)- RT: ——(©)- 
[Lre | [seo | [Lee] [re |[ sew | [x | 
图 8-49 选择 二 维 码 样式 


进入 “美化 二 维 码 ”页 面 ， 在 “官方 模板 码 ” 选 项 卡 中 选择 喜欢 的 二 维 码 样 


式 ， 完 成 后 单 击 “下载 二 维 码 ” 按 钮 ， 对 该 二 维 码 进行 下 载 ， 如 图 8-50 所 示 。 需 要 使 用 


时 打开 下 载 后 的 二 维 码 即 可 。 
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由 166583 L19848 


图 8-50 ”美化 并 下 载 二 维 码 


sy 
目 使 用 ogo 制 作 二 维 码 
二 维 码 还 可 以 使 用 logo 进 行 制作 ， 只 需要 在 “美化 二 维 码 ”页面 中 单 击 “ 上 传 品牌 
logo” 按 钮 ， 在 打开 的 页 面 中 选择 制作 二 维 码 需 要 使 用 的 logo， 单 击 “ 打 开 ” 按 钮 ， 即 可 
创建 带 有 logo 的 二 维 码 。 


8.5 淘宝 视频 的 制作 


淘宝 详情 页 或 主 图 中 会 使 用 视频 的 方式 向 买 家 展示 产品 ， 如 产品 的 使 用 体验 、 穿 着 效 
果 展 示 等 。 通 过 视频 展示 产品 的 方式 比 图 片 更 直接 ， 能 够 让 消费 者 直观 、 迅 速 地 了 解 商品 
的 效果 、 信 息 和 使 用 方法 。 本 节 将 对 淘宝 视频 的 制作 方法 做 具体 讲解 。 


8.5.1 淘宝 视频 的 拍摄 


拍摄 视频 与 拍摄 商品 图 片 一 样 ， 都 常常 使 用 数码 单反 相机 进行 拍摄 ， 既 方便 又 实用 ， 
是 视频 拍摄 的 首选 。 拍 摄 时 首先 要 了 解 商 品 的 拍摄 流程 及 拍摄 原则 ， 以 便 为 后 期 视频 制作 
做 准备 。 
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1. 淘宝 视频 的 拍摄 流程 


拍摄 视频 需要 遵循 一 定 的 流程 , 才能 使 拍摄 的 视频 更 加 完整 。 其 拍摄 流程 主要 有 4 步 ， 
分 别 是 了 解 商品 的 特点 、 选 择 场景 、 拍 摄 视频 和 后 期 合成 ， 具 体 介绍 如 下 。 

。 了 解 商品 特点 : 拍摄 视频 前 一 定 要 对 商品 有 相当 的 了 解 ， 包 括 商品 的 特点 和 使 用 方 
法 ,这 样 才能 对 商品 拍摄 时 所 用 到 的 模特 、 背 景 .搭配 等 进行 合理 地 选择 。 在 拍摄 时 ， 
需要 对 商品 的 特色 及 细节 进行 重点 展示 ， 帮 助 消费 者 了 解 商 品 ， 以 打消 顾虑 ， 促 进 

。 选 择 道具 场景 : 视频 拍摄 的 道具 有 很 多 ,但 道具 的 使 用 还 是 需要 根据 商品 进行 选择 。 
如 某 款 产品 需要 录制 解说 ， 就 要 选择 录音 设备 ; 如 商品 需要 进行 室内 拍摄 ， 就 要 选 
择 对 应 的 灯光 。 

。 拍摄 视频 : 一 切 准备 就 绪 后 ， 即 可 进行 视频 的 拍摄 。 拍 摄 中 应 该 注意 景 别 和 角度 。 
景 别 是 指 摄像 机 与 被 拍摄 对 象 的 距离 远近 , 一 般 分 为 远景 、 全 景 、 中 景 、 近 景 和 特写 ， 
8-51 即 中 景 和 特写 的 拍摄 ; 角度 则 是 指 平视 角度 、 仰 视角 度 和 俯视 角度 。 平 视角 
度 是 指 在 同一 水 平 线 上 拍摄 ， 仰 视 视角 是 指 以 仰视 的 角度 拍摄 ， 俯 视角 度 则 是 指 以 
俯视 的 角度 进行 拍摄 。 图 8-52 所 示 即 为 平视 角度 和 俯视 角度 拍摄 的 效果 。 


(a) 平视 角度 (b) 俯视 角度 
图 8-52 平视 角度 和 俯视 角度 拍摄 效果 
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。 后 期 制作 : 拍摄 视频 后 ， 还 需要 将 视频 多 余 的 部 分 进行 删除 ， 然 后 将 多 个 场景 进行 
组 合 ， 或 添加 字幕 、 音 频 和 场景 切换 效果 等 操作 。 这 些 操作 需要 借助 视频 制作 软件 
进行 编辑 ， 常 用 的 视频 编辑 软件 有 很 多 ， 但 本 章 将 使 用 淘宝 官方 提供 的 视频 编辑 工 
具 一 一 淘 拍 为 例 进 行 讲解 。 
2. 淘 宝 视 频 拍 摄 原则 

淘宝 中 的 视频 是 不 可 或 缺 的 ， 它 不 仅 可 以 让 商品 变 得 更 真实 ， 还 能 对 商品 的 效果 和 细 
节 进 行 展示 。 在 淘宝 网 中 ， 常 见 的 视频 应 用 位 置 包括 主 图 视频 和 详情 页 视频 两 种 。 因 为 模 
块 不 同 ， 对 应 的 视频 长 度 和 建议 长 宽 也 不 相同 ， 下 面 分 别 对 这 两 种 视频 进行 介绍 。 

。 主 图 视频 : 主 图 视频 主要 应 用 在 商品 主 图 的 位 置 ， 用 于 展示 商品 的 特点 和 卖点 。 在 
制作 视频 时 ， 无 线 端 主 图 视频 时 长 为 60 秒 以 内 ，PC 端 为 9 秒 以 内 ， 视 频 尺 寸 可 以 
为 1:1、16:9、3:4 三 个 比例 。 现 在 主推 尺寸 为 3:4， 因 为 这 个 尺寸 的 视频 更 符合 
用 户 浏 览 习 惯 。 

。 详 情 页 视频 : 该 视频 主要 应 用 在 宝贝 描述 中 ， 常 用 于 对 商品 的 使 用 方法 或 产品 的 效 
果 进 行 展 示 。 在 制作 视频 时 ， 其 视频 长 度 不 能 超过 10 分 钟 ， 一 般 建 议 保持 在 1 分 
钟 以 内 ， 并 且 视 频 分 辩 率 一 般 为 1920 像素 x 720 像素 。 


8.5.2 使 用 淘 拍 制作 视频 


淘 拍 是 淘宝 官方 提供 的 免费 的 产品 视频 制作 插件 ， 支 持 PC 端 和 无 线 端 。PC 端 可 对 
已 拍摄 完 的 视频 进行 剪辑 及 发 布 ， 而 无 线 端 既 支持 视频 拍摄 也 支持 视频 剪辑 。 本 节 将 以 
PC 端 主 图 视频 的 剪辑 与 发 布 为 例 进行 讲解 。 

下》 在 浏览 器 中 输入 淘 拍 网 址 https://taopai.taobao.com， 登 录 商 家 账户 ， 进 入 淘 
拍 首页 。 单 击 “ 创 建 视频 ”按钮 ， 如 图 8-53 所 示 。 


国 淘 拍 


图 8-53” 淘 拍 首页 
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《SS 编辑 视频 基本 信息 ， 填 写 视频 名 称 ， 选 择 视频 类 目 信息 以 及 视频 尺寸 ， 单 击 


“创建 视频 ”按钮 ， 如 图 8-54 所 示 。 


+ 视频 名 称 : 连衣裙 主 图 视 须 7116 


*# 比例 : bE) ) 169 ® 34 
如 果 上 传 视频 画 杜 尺 十 与 迁 中 比例 不 一 到 ， 将 会 对 视频 渤 
行 自动 过 


图 8-54 ”编辑 新 建 视频 信息 


单 击 “ 新 增 片段 "， 进 入 “新 增 片段 ”页 面 ， 单 击 页 面 右上 角 的 “上 传 视频 ” 


按钮 ， 如 图 8-55 和 图 8-56 所 示 。 


国光 垢 可 
自 


素材 


虽 
人 


图 8-55 ”选择 “新 增 片段 ” 


GE 在 “素材 标签 "下 拉 菜 单 中 选择 素材 标签 ,以 便 保存 及 查找 , 单 击 “ 上 传 " 按钮 ， 


如 图 8-57 所 示 。 
GE》 单 击 “ 模 特 ” 后 方 的 “编辑 ”按钮 2 ,设置 该 视频 片段 的 播放 标签 ,如 
所 示 。 


图 8-58 


263 


RAR 


EE: 光 店 美工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


新 并 片段 
上 OO 
535 | | SH 
簿 无 机 有 吉村 
图 8-56 “新 增 片 段 ” 页 面 
新 增 片段 X 
“素材 和 5 答 | 模 竺 ] 昌 光 折 已 为 你 旬 提 供 26 素 村 存 通 空间 ( 不 影响 光栅 需 的 存储 们 间 ), 存 人 是 有 限 请 人 理 利 用 吻 
Di 
科技 
口味 
it 
模特 BR 
配件 
清洁 您 可 以 将 视频 拖 搜 到 此 或 点 击 下 面 的 按钮 
容量 
设计 
夺 流 ， 
L | 


图 8-57 ”选择 素材 标签 


选择 标签 


图 8-58 ”设置 视频 播放 标签 
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ES》 在 本 地 文件 中 选择 已 经 拍摄 完成 的 视频 ， 上 传 完成 后 对 单个 视频 片段 进行 编 


辑 ， 单 击 下 方 缩 览 图 中 的 “剪辑 ”图 标 ， 如 图 8-59 所 示 。 


"村 S52 全 “标签 3 


图 8-59 剪辑 视频 


拖 动 视频 下 方 的 进度 条 ， 可 以 选择 视频 区 间 ， 选 取 想 要 保留 的 视频 ， 单 击 右 


上 角 的 “完成 ”按钮 ， 如 图 8-60 所 示 。 


ni ESE 


1X 


图 8-60 ”选取 视频 区 间 


单 击 视频 左下 角 缩 览 图 下 方 的 “字幕 "图 标 ,如 图 8-61 所 示 。 进 入 “编辑 字幕 ” 
， 选 择 适合 的 字幕 样式 ， 如 图 8-62 所 示 ， 单 击 “ 确 认 ” 按 钮 。 
GE》 在 页 面 右 侧 编辑 字幕 内 容 及 字幕 样式 ， 拖 动 页 面 下 方 的 时 间 轴 选择 字幕 出 现 


的 时 间 ， 如 图 8-63 所 示 ， 单 击 右上 角 的 “完成 ”按钮 。 
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图 8-63 ”编辑 字 医 样式 
pe 以 同样 的 方式 上 传 并 剪辑 第 二 段 视 频 ， 第 二 段 视频 为 细节 展示 。 然 后 单 击 
细节 片段 前 方 的 “ 转 场 动 效 ” 按 钮 图 ， 为 两 个 视频 片段 的 中 间 设 置 转换 效果 ， 如 图 8-64 
eg 


图 8-64 ”设置 转 场 动 效 
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GE 添加 背景 音乐 , 选择 左 侧 导 航 栏 中 的 “音效 ”选项 , 单 击 “ 添 加 音乐 ”按钮 ， 
选择 合适 的 音乐 ， 或 选择 本 地 音乐 文件 进行 上 传 ， 单 击 “确认 ”按钮 ， 如 图 8-65 所 示 。 


图 8-65 ”添加 背景 音乐 


单 击 页 面 右上 角 “ 预 览 ”按钮 , 即 可 对 已 编辑 视频 进行 效果 的 预览 ,如 图 8-66 
所 示 


回 疝 折 z=] 
自 se NAN 

swan 

A 及 3 


图 8-66 ”预览 视频 
EET》 单 击 页 面 石上 角 “ 发 布 "按钮 ,选择 该 视频 对 应 的 宝贝 ,关联 视频 至 宝贝 主 图 ， 


T 


单 击 “ 确 定 发 布 ”按钮 ， 如 图 8-67 所 示 。 
宝贝 关联 成 功 后 ,视频 审核 完成 即 可 直接 展示 主 图 位 置 ,审核 约 需 要 15 分 钟 ， 
如 图 8-68 所 示 。 
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na | ss 


苗 丝 拼接 毛 针 织 衫 长 袖 2018 秋 季 新 
款 女 美 内 措 打 底 杉 落款 毛衣 政 


EE ee 
S925 纯 当日 埋 学 生 族 吕 送礼 七 夕 


出 告 中 


图 8-67 ”关联 宝贝 主 图 


视频 发 布 成 功 并 已 关联 到 宝贝 ! 
当 视频 完成 审核 后 ， 将 出 现在 该 宝贝 详情 页 ， 请 天 心 等 待 


图 8-68 ”视频 发 布 成 功 


8.6 本 章 小 结 


本 章 主 要 介绍 了 高 点 击 率 的 主 图 制作 、 直 通车 推广 图 设计 、 钻 石 展 位 推广 图 设计 、 店 
铺 二 维 码 的 制作 、 淘 宝 视频 的 制作 等 知识 。 

通过 本 章 内容 的 学 习 ， 读 者 应 该 掌握 宝贝 主 图 、 直 通车 推广 图 、 钻 石 展位 图 的 设计 及 
制作 方法 ， 并 能 熟练 创建 店铺 二 维 码 ， 使 用 淘宝 制作 视频 。 
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店铺 装修 及 上 传 方法 


学 习 目 标 

知识 目标 | 。 了解 店铺 装修 工具 一 一 旺 铺 

。 熟悉 PC 端 与 无 线 端 装修 基础 设置 

。 掌握 PC 端 店铺 装修 的 流程 及 操作 方式 
。 掌握 无 线 端 店铺 装修 的 流程 及 操作 方式 


技能 目标 


店铺 装修 是 网 店 的 “门面 ”， 如 在 店铺 装修 上 落后 于 其 他 店铺 ， 则 很 难 吸引 更 多 的 顾客 浏览 店 
铺 ， 也 就 会 影响 销量 ， 所 以 店铺 装修 也 是 店铺 运营 中 的 重要 一 环 。 前 面 章节 已 经 将 店铺 装修 需要 的 
所 有 素材 制作 完成 ， 那 么 该 如 何 将 这 些 素材 上 传 至 店铺 中 并 完成 整个 页 面 的 装修 呢 ? 本 章 将 从 PC 
端 店铺 装修 和 无 线 端 店 铺 装 修 两 个 方面 对 淘宝 店铺 装修 的 相关 知识 进行 讲解 。 


店 美工 设计 实 操 配色 、 布 局 、 修 图 、 装 修 


9.1 认识 店铺 装修 工具 一 一 旺 铺 


淘宝 旺 铺 是 淘宝 官方 推出 的 一 项 增值 服务 ， 它 既 可 以 使 店铺 界面 更 加 个 性 化 ， 也 可 
以 帮助 卖家 更 好 地 经 营 店铺 。 为 了 满足 不 同 卖家 店铺 装修 的 需求 ， 淘 宝 旺 铺 为 卖家 提供 了 
3 种 版 本 ， 分 别 为 基础 版 、 专 业 版 及 智能 版 ， 不 同 版 本 具有 不 同 的 功能 和 特点 ， 具 体 介 绍 
如 下 。 


1. 基础 版 


新 店 刚 创建 时 ， 店 铺 装 修 后 台 的 默认 模板 为 基础 版 ， 可 以 免费 使 用 ， 当 然 店 铺 装修 的 
效果 也 比较 简单 。 接 下 来 进入 基础 版 界面 ,登录 淘宝 卖家 账号 进入 卖家 中 心 ,如 图 9-1 所 示 。 


天 家 下 让 和 


我 订购 的 应 用 > 人 @ 2018 了 六 拭 要 ,全 场 智能 旬 费 ， 和 别人 力 ,是 各 视 取 >> 坦 看 详情 


常用 操作 
已 灾 出 的 宝贝 评价 管理 
发 布 二 贝 出 售 中 的 宝贝 


实时 数据 。 更 新 时 间 : 2018-01-15 11:52:35 实况 直播 


支付 全 客 OO” 
0 0 


昨日 全 天 = 昨日 全 天 


有 物流 管理 ; 支付 买 家 数 (© hs 
0 0 


昨日 全 天 - ”昨日 全 天 


发 布 宝贝 。 ”出售 中 的 三 贝 HF 
向 窜 推 荐 。。 体检 中 心 9 坦 各 更 全 数 痉 
歼 友 由 生意 参 混 提 供 
昨日 全 天 
辐 店铺 管理 


san [En] 


图 片 空间 。 手机 淘 主 店铺 待 办 事项 


图 9-1 卖家 中 心 


单 击 店铺 管理 左 侧 导 航 栏 中 的 “店铺 装修 "， 即 可 进入 淘宝 装修 后 台 。 在 淘宝 装修 后 
台 页 面 ， 选 中 PC 端 并 单 击 首页 后 方 的 “装修 页 面 "， 如 图 9-2 所 示 。 
进入 装修 后 台 便 可 以 在 左 侧 工具 栏 上 看 到 “基础 版 ”这 三 个 字 标识 ， 如 图 9-3 所 示 。 
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闻 宝 旺 请 [区 


阁 宝 旦 请 


首页 20180301172904 Es | 
定义 自 定 义 区 图片 办 播 
sa 后 内 搜索 页 2018.0301172904 © 四 
] 店 详 情 页 客服 中 心 。 生 齐全 课 
图 9-2 ”了 旺 铺 后 自 图 9-3 ”店铺 装修 工具 栏 


[ 具 栏 右 侧 即 为 基础 版 装修 界面 ， 基 础 版 装修 布局 多 为 两 栏 结 构 ， 如 图 9-4 所 示 ， 也 
就 是 190 像素 和 750 像素 两 栏 布局 。 在 190 像素 和 750 像素 之 间 有 一 条 分 隔 线 ， 把 整个 画 
面 一 分 为 二 。 因 为 基础 版 无 法 设置 背景 色 ， 所 以 两 边 一 般 都 是 白色 
2. 专业 版 

卖家 使 用 旺 铺 专业 版 需要 付费 ， 但 是 对 于 新 店 来 说 只 要 店铺 信誉 没有 超过 一 个 钼 ， 就 
可 以 免费 使 用 专业 版 ， 店 铺 信誉 在 一 钼 以 上 的 店铺 ， 需 要 每 个 月 支付 一 定 的 费用 。 新 店 如 
果 要 升级 为 专业 版 ， 只 需 进入 店铺 装修 后 台 ， 并 将 鼠标 放置 在 “基础 版 ”上 ， 单 击 “ 免 费 
升级 专业 版 ”按钮 ， 如 图 9-5 所 示 


闻 宝 旺 请 。 aa 


店铺 页 头 
店铺 招 笨 
Sm 
宝 由 排行 本 主 风 推荐 巴 
h 一 555 
主见 排行 BX 区 | 外 所 更 


宝贝 推荐 。 宝 由 排行 点 兴 分 类 
EE 蝇 加 
个 性 分 类 自 定义 区 图片 办 播 


ow lw 


cht 友情 氏 接 。 客服 中 心 生意 会 谋 
图 9-4 ”了 旺 铺 基 础 版 布局 图 9-5 ”店铺 装修 后 


台 旺 铺 专业 版 模板 结构 多 为 950 像素 布局 ， 拥 有 图 片 轮 播 和 背景 图 ， 能 够 实现 全 
屏 效果 ， 如 图 9-6 所 示 。 旺 铺 专业 版 还 可 以 更 换 自 己 的 店 招 图 片 以 及 950 像素 的 广告 轮 
播 图 。 
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图 9-6 ”有 旺 铺 专业 版 布局 


3. 智能 版 


旺 铺 智能 版 于 2016 年 6 月 上 线 ， 它 是 在 专业 版 旺 铺 基础 上 升级 而 来 ， 提 供 了 丰富 的 
无 线装 修 功能 和 营销 玩法 , 为 店铺 提供 更 优质 的 用 户 体验 , 拉 近 买卖 关系 。 同 专业 版 一 样 ， 
一 钼 以 下 的 店铺 可 以 免费 使 用 智能 版 ， 一 钻 以 上 店铺 每 个 月 同样 需要 支付 一 定 的 费用 ， 专 
业 版 的 商家 补 齐 差价 后 可 升级 为 智能 版 。 新 店 若 要 升级 为 智能 版 , 只 需 进 入 店铺 装修 后 台 ， 
单 击 店铺 装修 页 面 左上 角 “ 升 级 到 智能 版 ” 即 可 ， 如 图 9-7 所 示 。 


冰 宝 旺 请 志 


图 9-7 ”店铺 装修 后 各 
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9.2 ”PC 端 店铺 装修 


淘宝 网 分 为 PC 端 和 无 线 端 ， 同 样 一 个 店铺 对 应 两 个 展示 端口 ， 即 PC 端 店铺 和 无 线 
端 店铺 。 本 节 我 们 主要 介绍 PC 端 店铺 装修 的 相关 知识 。PC 端 店铺 装修 主要 对 店铺 首页 
的 不 同 模块 进行 装修 ， 主 要 在 店 招 、 导 航 区 、 图 片 轮 播 模块 、 页 尾 设计 等 几 方面 对 PC 端 
店铺 装修 进行 讲解。 


9.2.1 ” 店 招 模块 装修 


上 传 店 招 是 店铺 装修 中 基础 操作 部 分 , 常见 的 店 招 装修 方式 有 默认 方式 和 自 定义 方式 。 
不 同 的 店 招 装修 方式 ， 上 传 方式 也 不 相同 ， 下 面 针 对 默认 方式 和 自 定义 方式 的 上 传 店 招 进 
行 详细 讲解 。 
1. 上 传 常规 店 招 

默认 情况 下 ， 店 招 的 尺寸 为 950 像素 x 120 像素 ， 超 出 该 尺 
才 的 店 招 部 分 将 无 法 显示 。 上 传 常规 店 招 的 具体 操作 如 下 。 

(GE 将 党 规 店 招 上 传 至 图 片 空间 ， 将 鼠标 指针 移动 至 该 
图 片上 ， 在 显示 的 几 个 按钮 中 ， 单 击 “复制 代码 ”按钮 ， 即 可 复 
制 该 图 片 的 代码 ， 如 图 9-8 所 示 。 写 疯 让 当 jpg 

打开 Dreamweaver 软件 ， 单 击 HTML 选项 ， 即 可 创 ”图 9-8 复制 店 招 代码 
建 一 个 空白 文档 ， 如 图 9-9 所 示 。 


DW zen wan eB sm Paw No ec dary OW sem Me 0 A we - [=l5l x 


> 二 驻 网 则 罗 呈 网 


图 9-9 ”新 建 Dreamweaver 文 档 
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人 ES 单 击 “ 拆 分 "按钮 ,切换 至 拆 分 窗口 , 按 Ctrl+A 组 合 键 选 择 左 侧 窗口 中 的 代码 ， 
按 Delete 键 删除 ， 如 图 9-10 所 示 。 


DW xi#n ms Em END WaxM ti0) 34IO Ens ECW Sa 图 9- Ss el 


写 关 | 衬 到 全 | 六 


司 四 站 站] 


图 9-10 删除 代码 


E33 按 ctltv 组 合 键 将 图 片 代码 粘贴 到 左 侧 的 窗口 中 ， 此 时 右 侧 窗口 将 出 现 相 
对 应 的 图 片 ， 如 图 9-11 所 示 。 


DW HU Sev) AD mew wo) 85lO wars) EOW meH Me 0” Ar Wi oo x | 


dm SD 


i 


-1 En 
上 由 


[| 


图 9-11 粘贴 图 片 代码 
人 GE 单 击 “ 设 计 ” 按 钮 ， 切 换 至 “设计 ”窗口 ， 然 后 单 击 页 面 左下 角 “ 属 性 ” 栏 
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中 的 热点 矩形 工具 , 按 住 鼠 标 左 键 不 放 , 在 “收藏 ”字样 图 标 出 绘制 一 个 矩形 ,释放 和 鼠标 ， 
如 图 9-12 所 示 。 


DW SH se sa EM aM eo 0 SA BOW Re O° Br 


图 9-12 添加 热点 区 


人 38》 从 淘宝 首页 搜索 店铺 ， 单 击 店铺 首页 右上 角 的 “收藏 ”按钮 ， 进 入 收藏 页 面 
后 ， 复 制 该 页 面 链接 ， 如 图 9-13 所 示 。 


(eR [oa “| Amoonam a 


次 最 党 访问 口 移动 版 书签 
@@ 大 人 收藏 该 店 铺 ? 
d[s116225127] 


? 初 见 豆 葡 克 如 王 66 者 效 到 名言 


确认 


图 9-13 复制 店铺 收藏 链接 
GE 在 窗口 下 方 的 属性 栏 中 ， 将 上 一 步 中 复制 的 店铺 收藏 链接 粘贴 到 “链接 ” 右 
侧 的 文本 框 中 ， 设 置 “目标 ”为 “ blank”， 如 图 9-14 所 示 。 
人 GE》 单 击 “ 代 码 ” 按 钮 ， 切 换 至 代码 窗口 ， 按 Ctrl+A 组 合 键 选择 窗口 中 的 代码 ， 
按 CtrltHC 组 合 键 复制 代码 ， 如 图 9-15 所 示 。 
GE》 进入 “卖家 中 心 ” 页 面 ， 单 击 “ 店 铺 管理 ”一 “店铺 装修 ”进入 旺 铺 装修 后 
台 ， 如 图 9-16 所 示 。 
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DW zm mee EW SAD Saw ro) slO wag EOW ser 0- EE el x 
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局 a 
有 cr 二 
ET e209| 
ec 
Drone EF mR 
es 
Er 
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下 
CE [EE ET 
oy 
E53 
图 9-14 添加 热点 超 链 接 
DW an wa SE MN Weaivy WD) Solo a EC ee 


0 CO 


/Wiechs HAF) 


[9 ov] | 站 区 0 9 


[工本 mon 天 


sosz15050 著 修 页 面 


图 9-16 ”店铺 装修 后 台 
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在 图 9-16 所 示 店 铺 装 修 后 台中 ， 单 击 “PC 端 ” 一 “基础 页 "。 然 后 将 鼠标 
放置 在 “首页 ”后 方 ， 单 击 “ 装 修 页 面 ”进入 店铺 首页 装修 页 面 ， 如 图 9-17 所 示 。 


间 宝 旺 请 sww 


噶 着 邢 时 证 可 重 四 1 目 
om 
由 如 
是 外 避 邮 
a 
3 


加 
Ssh ee 
图 Q 
天 匡 中 。 宝 由 这 


图 9-17 页面 编辑 


ES 单 击 店 招 右 侧 的 “编辑 ”按钮 ， 如 图 9-18 所 示 。 


= 了 ETTT 


图 9-18 编辑 店 招 


GE 在 打开 “店铺 招牌 ”对 话 框 中 ， 单 击 “ 自 定义 招牌 ”下 方 的 | 按钮 ， 并 将 
复制 的 店 招 代码 粘贴 至 文本 框 ,然后 在 “高 度 ”数值 框 中 输入 “120”, 单 击 “保存 ”按钮 ， 
如 图 9-19 所 示 ， 


招牌 类 型 : 局 默认 招牌 。 寺 自 定义 招牌 
自 定义 内 容 过 委 基 


n6sncvAEyfbFZHsW2pwfIOw3LhwacyVfEgEncvAEVQbFZHAEeEwfIDw3LhwacyVLn68ncvAEeQbuyCwv9vwvUmaz3PGGOyCwoOwv 
vayJtvpviwwwwhCvwwwwUEpphvUqQw9DCvpvQovwmmZhCv2jJhwwUEOphvW+LyCwpvwww3QhvCwhyvmrvpvEws+VUR2vh1 
HdphvmpypHpvkUgmF7p==" target="_blank"> 
</map> 

fe="display:none;"> </a> </p> 


内 容 正 文 每 5 分 钟 自动 保存 一 次 。 自动 保存 于 : 2018-09-03 18:00:27 。 回 立即 保存 “恢复 编辑 历史 ~ 


图 9-19 粘贴 代码 
区 单 击 页 面 右上 角 的 “预览 ”按钮 ， 即 可 查看 上 传 效 果 ， 如 图 9-20 所 示 。 当 


277 


RAR 


人 EE 语 关 工 设计 实 操 : 配色 、 布 局 、 修 图 、 装 修 


单 击 店 招 “收藏 ” 热 区 时 ， 即 可 跳 转 到 店铺 收藏 页 面 。 


淘宝 网 ma EE 


店铺 : 大 麻 树 女装 店 累计 信用 评价 0 该 店铺 尚未 收 到 评价 让 收藏 让 浦 。 赋 用 手机 广 本 店 


图 9-20 ”预览 效果 


2. 上 传 自 定义 通栏 店 招 


一 般 来 说 ， 自 定义 店 招 尺寸 为 1920 像素 x 120 像素 或 1920 像素 x 150 像素 ， 但 上 传 
通栏 店 招 时 ， 需 要 将 通栏 店 招 分 为 两 部 分 上 传 。 第 6 章 中 的 通栏 店 招 设计 中 ， 将 通栏 店 招 
存储 为 两 种 格式 ， 第 一 种 为 1920 像素 x 150 像素 ,第 二 种 为 950 像素 x 120 像素 。 通 栏 
店 招 的 上 传 步骤 如 下 。 

GE 将 保存 的 两 个 不 同 尺寸 的 通栏 店 招 上 传 至 图 片 空间 ， 如 图 9-21 所 示 。 然 后 
使 用 与 上 传 常规 店 招 相同 的 步 又 将 通栏 店 招 950 像素 x 120 像素 部 分 上 传 至 店铺 首页 的 店 
招 部 分 ， 如 图 9-22 所 示 


页 六 月 最 gif 通栏 店 招 基 础 部 分 .gif 


图 9-21 上 传 通栏 店 招 的 两 个 部 分 


\ TT 7 国有 i 
/0 人 | 党 


图 9-22 ”通栏 店 招 基 础 部 分 上 传 效果 
GE 950 像素 x 120 像素 的 店 招 上 传 成 功 后 ， 选 中 页 面 左 侧 “页 头 ” 选 项 卡 ， 单 
击 页 头 背景 图 下 方 “更 换 图 片 ”按钮 更 换 店铺 背景 图 片 ， 将 1920 像素 x 150 像素 通栏 店 
招 上 传 至 该 区 域 ， 如 图 9-23 所 示 。 


278 


第 9 章 | 店铺 装修 及 上 传 方法 


再 开 文件 各 IN): 开交 备 蝇 gif 


sf BE -> 


© RHis 要 里 认 只 可 用 到 当前 
EE 应 用 到 所 有 页 面 


> 
客 导 中 心 。 ”全 入 高 


图 9-23 ”上传 页 头 背 蝇 


E>》 图 片上 传 成 功 后， 分 别 将 页 头 中 “背景 显示 ”和 “背景 对 齐 ” 设 置 为 “不 平 
铺 ” 和 “居中 ”"， 如 图 9-24 所 示 。 


图 9-24 ”设置 页 头 


GZ 店 招 设置 完成 后 ,可 以 单 击 “ 预 览 ” 按 钮 ,查看 店 招 设置 效果 ,如 图 9-25 所 示 。 
当 我 们 单 击 店 招 “收藏 ” 热 区 时 ， 即 可 跳 转 到 店铺 收藏 页 面 。 


宝 | 搜索 
淘宝 网 sm 
请: 大 魔 村 女装 店 黑 计 信用 评价 0 该 店 铺 当 未 眉 开 评价 玄 尿 基 店 销 。 茹 用 手机 近 本 店 


图 9-25 ”设置 后 的 通栏 店 招 
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9.2.2 ”导航 的 设置 与 装修 


店铺 首页 导航 对 于 买 家 来 说 就 像 是 网 店 的 一 幅 地 图 ， 合 理 设置 首页 导航 可 以 使 网 店 商 
品 分 类 更 加 清晰 有 条 理 ， 缩 短 买 家 寻找 目标 商品 的 时 间 。 导 航 条 位 于 店 招 下 方 ， 将 鼠标 移 
至 导航 条 模块 ， 单 击 “编辑 ”按钮 ， 即 可 设置 店铺 导航 条 ， 如 图 9-26 所 示 。 


2 编辑 | + 添加 模块 


图 9-26 编辑 导航 条 
设置 导航 条 除了 使 用 前 面 介绍 的 自 定义 通栏 的 方法 外 ， 淘 宝 官方 也 提供 了 一 些 导航 模 
板 供 卖家 直接 使 用 。 设 置 导航 条 的 具体 步骤 如 下 所 示 
ES 单 击 图 9-26 中 的 “编辑 ”按钮 ， 打 开 “ 导 航 ” 对 话 框 ， 如 图 9-27 所 示 。 


导航 设置 。 显示 设置 
首页 


店 请 号 航 区 最 允 可 设置 12 顺 一 织 内 容 ， 但 超过 页 面 尺 十 宽度 部 分 将 不 展现 《建议 不 超过 7 项 ) 


ES 


图 9-27 “导航 ”对 话 框 

EE 单 击 图 9-27 右 下 方 的 “添加 ”按钮 ,进入 “添加 导航 内 容 ” 对 话 框 ,如 图 9-28 
所 示 。 

EGE》 单 击 图 9-28 中 的 “管理 分 类 ”按钮 ， 进 入 “分 类 管理 ”页 面 ， 如 图 9-29 
所 示 。 

人 GE 单 击 图 9-29 中 的 “添加 手工 分 类 ”按钮 ， 将 店铺 中 的 产品 进行 分 类 设置 ， 
如 图 9-30 所 示 ， 然 后 单 击 右 上 角 的 “保存 更 改 ” 按 钮 。 

人 GE 下 切换 到 添加 导航 内 容 对 话 框 ， 单 击 “ 页 面 ”选项 卡 ， 选 中 需要 在 导航 栏 中 显 
示 的 分 类 页 面 ， 如 图 9-31 所 示 。 
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图 9-28 ”添加 异 航 内 容 一 一 宝贝 分 类 


Te | 
全 BF | tk 
分 类 名称 EN 上 2 RAR 开 便于 间 分 类 类 型 所 作 
口 » [ew [leg ws +44 DD 20802 #a js 吉 看 
| 裤 丢 FE ED 2015-01-10 。 半日 自动 分 类 图 删除 ”搜索 修改 
》 | 卫 胡 FE @D  zmgoz2 Fa 鄞 除 重 看 
CE 国 * 2 DD 208022 #3 类 删除 坦 看 


图 9-30 ”分 类 管理 页 面 二 


宝贝 分 类 ”页面 。 自 定义 链接 


请 选择 要 添加 的 页 面 


图 9-31 添加 导航 内 容 一 一 页 面 
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EGE》 单 击 图 9-31 中 的 “确定 ”按钮 ， 回 到 “导航 ”对 话 框 ， 如 图 9-32 所 示 。 然 
后 单 击 “ 显 示 设 置 ” 选 项 卡 标签 。 


导航 设置 | 显示 设置 全 使 用 帮助 


首页 

品牌 看 事 

全 部 分 类 x 
每 日 新 品 全 X 


图 9-32 导航 设置 


为 使 导航 区 背景 颜色 与 店 招 区 相 统一 ， 需 要 通过 第 三 方 代 码 生成 网 站 将 导航 
条 背景 虹 生 成 代码 的 方式 ， 然后 将 选项 卡 切换 至 “显示 设置 ”对 话 框 中 ， 将 生成 的 代码 粘贴 
至 “显示 设置 ”对 话 框 中 ， 如 图 9-33 所 示 。 


加 使 用 部 助 


系统 会 自动 给 Css 选择 器 统一 添加 前 恕 : #page #content .tshop-pbsm-shop-nav-ch， 请 忽 重 复 添加 ! 
5 里 不 能 包含 外 树 图 片 ,否则 保存 的 时 候 , 编 辑 内 容 会 丢失 


.skin-box- 

bd{backaround:url(/ /adp,alicdn.com/imaextra/i2/1084088639/TB23,2z0aAOBKNISZSYXXaHAVXa._!!1084088639,gif 
no-repeat center bottom;}.skin-box-bd .menu-list{background:transparent;}.skin-box-bd .menu-list 
-menu{background:transparent;border:none;}.skin-box-bd .menu-list .mer 
.link{background:transparent;border:none;}.all-cats{background:transparent;}.all-cats 
link{background:transparent;border:none;}.skin-box-bd .menu-list ,menu Jink .title{ color:#000000;}.all-cats Jink 
titie{color:#000000;}.all-cats .link ,popup-icon{background:transparent;} 


图 9-33 ”粘贴 导航 条 代码 


GE 单 击 图 9-33 中 “确定 ”按钮 完成 导航 条 设置 ， 单 击 “ 预 览 ” 按 钮 查看 导航 
条 设置 效果 ， 我 们 可 以 看 到 已 添加 的 分 类 ， 如 图 9-34 所 示 。 


淘宝 网 ss EE 
C 尼 寺 传记 评价 EE 


图 9-34 ”导航 区 设置 后 效果 
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si 


时 添加 页 面 背景 


店 招 与 导航 设置 完成 后 ， 可 以 将 之 前 制作 的 页 面 背景 进行 上 传 ， 其 设置 方法 与 页 头 背 


景 的 上 传 方式 相同 。 


9.2.3 ” 轮 播 模块 装修 


将 制作 好 banner 图 片上 传 到 图 片 空间 ， 上 传 成 功 后 ,需要 设置 轮 播 效果 。 图 片 轮 播 


模块 有 常规 轮 播 和 全 屏 轮 播 两 种 样式 ， 它 们 的 设置 方式 也 是 不 同 的 ， 具 体 如 下 。 
1. 设置 全 屏 轮 播 图 片 


全 屏 轮 播 图 片 的 设置 与 通栏 店 招 的 设置 相同 ， 也 需要 通过 代码 完成 。 下 面 在 淘宝 装修 


页 面 中 添加 自 定义 模块 ， 然 后 通过 代码 制作 全 屏 轮 播 效果 ， 其 具体 操作 如 下 。 
进入 店铺 装修 页 面 ， 在 左 侧 列表 中 拖 忠 自 定义 模块 至 右 侧 页 面 中 ， 如 


图 9-35 


合 定义 内 音 ,可以 用 幸村 示 让 博导 忆 A 宇 出 、 活动" 


图 9-35 ”添加 自 定义 模块 


打开 “ 码 工 在 线 ” 网 站 并 登录 ， 单 击 “ 店 铺 类 型 ”下 方 的 “淘宝 天 猫 ”按钮 


和 “效果 分 类 ”下 方 的 “全 屏 轮 播 ”按钮 , 选择 一 个 适合 的 全 屏 轮 播 效 果 , 如 图 9-36 所 示 。 


[ “= BLS | 
iemex 


Disss05s% 


图 9-36 选择 店铺 类 型 及 轮 播 效果 
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ES》 打开 “全 屏 轮 播 ”页 面 ， 在 “店铺 类 型 选择 ”后 方 单 击 选中 “淘宝 专业 版 ”， 


设置 轮 播 类 型 和 轮 播 图 装修 。 依 次 将 图 片 空间 中 的 全 屏 banner 图 片 地 址 粘贴 至 “ 轮 播 图 


设置 ”下 方 ， 如 图 9-37 所 示 。 


海报 图 片 添加 ， 动画 内 容 设置 
[ 轮 莫 闫 型 设 于 

店 请 类 型 寺 择 “ 目 【 天 潮 店 铺 】 。 加 [光宇 二 版 】 。 个 [ 淘 主 基础 鼎 ] 

委 播 风格 和 择 。 缩 咯 图 风格 


模块 间 障 “默认 


唱 容 匡 图 设置 
图 片 地 址 1 (bVXpX00000000X_!12096209889 jpg 链接 地 址 1 https://detaitmal.conVtem.htm?spn 
图 片 地 直 2 KNISZFIOCCcGOVyXa_12096209889jpg 钳 接 地 址 2 https//detaitmalcerVtem_htm?spn 


图 片 地 址 3 JNkHFNRXXtc9qpXa_!2096209889jpg 链接 地 址 3 httpc//debitmalcerytemhtmpspm 


EC 
图 9-37 设置 图 片 地 址 
人 GE 切换 到 “动画 内 容 设置 ”选项 卡 ， 设 置 轮 播 图 的 动画 效果 ， 如 图 9-38 所 示 。 


海流 图 片 添加 。 动画 内 容 设 置 
日 动画 冰 果 设 轩 
动 夯 站 时 选择” 局 【 显 示 个 藏 】 。 全 [ 淡 隆 碎 现 ] 【三 丰 深 动 】 。 者 [水 下 滚动 】 
负 必 方式 加 【 风 标 经 i 垢 4 发 】 日 人 限 标 点 出 各 用】 
条 站 昌国 [无限 浪 押 】 。 日 [下 ] 


图 片 切 执 效 果 。 疆 冲 效果 


钴 让 速度 ”中 


区 |] 区 ] 区 


切 搬 时 间 ”4 秒 


日 自 定义 设置 


左右 箭头 开关 旦 示 下 


庄 和 上 可 。 隐 吉 加 


Der En Ea 


图 9-38 ”设置 动画 效果 


人 GE 设置 好 轮 播 图 动画 效果 后 ， 单 击 图 9-38 下 方 “ 生 成 代码 ”按钮 ， 在 下 方 的 


文本 框 中 会 自动 生成 代码 ， 单 击 “复制 内 容 ” 按 钮 复制 生成 的 代码 ， 如 
EB》 返回 淘宝 装修 页 面 ， 单 击 自 定义 模块 右上 角 的 ES 国 按钮 


图 9-39 所 示 。 


， 进 入 “ 自 定 义 内 


容 区 ”对 话 框 。 选 择 “显示 标题 ”后 方 的 “不 显示 ”选项 ， 再 单 击 色 按钮 ， 将 复制 的 代码 


粘贴 至 下 方 文本 框 中 ， 如 图 9-40 所 示 。 


EB 单 击 “确定 ”按钮 ， 完 成 自 定义 轮 播 图 设置 。 运 营 人 员 可 通过 单 击 店铺 装修 


操作 界面 右上 角 的 “预览 ”按钮 ， 查 看 店铺 轮 播 图 装修 效果 ， 如 图 9-41 
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FRR ETTTTEITTPPRPSETPET 1519011449” style PPTETT 


{div class= -featerraore footer nore-trigser” style-"left-suto-right-ato-width:950pr:beight-600px:top-anto:padding-0;border:a0ne; -inder:1: 
backeromd: ore; " 


"tyler "Left-—4hSpns top: S00p; iath: 1920gr border -one Fadding:0: baskeromd rere 人 


2 scrolls “easing 
stivaTrigerr Cl "haden}” deta-mideat typ Caronssl” 


Meee ,rastBtaCls Mart , sutoplay -tr rienSis 


CT TWidgst Morev” datavidest-contis="f trigser 2 CF .sligy -fpoae - CP roffset :[-51, 0]. points -Fec .ce’])}” data-videst-trpe= Popap” 
yes 人 
Cdiv class= Mgrer” at7ls=-topt-aize-00pricaranr-Poimteri 7(iag 本 cr ttF://iat0t taobaccan ceajingertra/i/126112166/TBZEaBaDODOOEDOCDUDODCDOOE 


rm 本 


图 9-39 ”复制 代码 


晤 未 村 条 : 入 不 旺 击 会 县 示 白 定义 内 音 区 


画 a -5 


<h lass= "en > <3 Brget=-_panc hret=rntpsy/aetah tmal.com/item namy 
pm=3730r 1.143 .S60p65baNajCpI8id= 5474745387218cm_id=140105335560edSSe27b&_U<slu752ncd4adaabbuctet=178sel_prepertes=5 
919063:6536025"> cimg sre="https://mg alcdnconyimgexra/B12095209889/TB2cxq2hOO0ObVXpIOODOOOOOOLI12096209889jpg'><la> 
/i> ll claso™ "hem"> <2 targot="_blank hrefc ttps/detailtrallcoryitamhtmy 
apm-azaor1.14.3.560b65bBNajCP28id=5474745382218cm_id=140105335569ed5Sc27b8_u=slu752nci44daabbucket=178aku_propertes=5 
S19063:6536025"» <img sre="htps://mg alicdn.com/ mgexba/2120952098891TB2EY59XHZnaKNEZFIOOCGOVXe_12096209699jPg'> </a> 
‘</li> <l cass="item"> <a target="_blank" href="https://detail tmall.com/item.htm? 
Spm=a230r.1.14.3,560b63LONSJCP28Jd=547474538221&Cm_Id=140105335569ed55e27b8_u=s1u752ncd44d8abbucket=178Sky_properties=5 
S19003:6539025"> <Img sre="https:// mg alcdn.com/mgexral A/2095209889/TB21NHEXNUTBUNCHFNFXNc SPXa_ 112096209859Jpg"></a> 


/dv> 


</dv> 
</dv> 
/dv> 


妆 编辑 白 代 三 内 容 正文 每 5 分 钟 白 动 保存 一 次 ” 局 立即 保存 | 恢复 编辑 历史 ~ 


[2 


图 9-40 ”粘贴 代码 


(4: en Fate 


图 9-41 通栏 轮 播 效果 图 
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2. 常规 轮 播 效果 设置 

常规 轮 播 模块 的 设置 方法 比较 简单 ， 在 设置 轮 播 图 片 之 前 ， 要 确定 是 否 已 将 做 好 的 
banner 图 上 传 至 图 片 空间 。 下 面 介绍 设置 常规 图 片 轮 播 模块 的 方法 ， 具 体操 作 如 下 。 


GE》 返回 店铺 装修 页 面 , 单 击 “图 片 轮 播 ” 模 块 右上 角 的 “编辑 ”按钮 ,如 图 9-42 
所 示 。 


ep 


图 9-42 编辑 图 片 轮 播 模 块 
EH 进入 “图 片 轮 播 ”对 话 框 ， 单 击 “ 图 片 目录 ”按钮 图 ,在 打开 的 列表 中 选择 
要 上 传 的 轮 播 图 片 ， 也 可 以 在 图 片 空间 中 复制 图 片 地 址 ， 粘 贴 到 “图 片 地 址 ”文本 框 中 ， 
如 图 9-43 所 示 。 


内 容 设 置 ， 显示 设置 @ taxah 
图 片 地 址 机 接地 址 抽 作 : 
hapey/meaicdncoinostr[ 国 ] x 

滩 加 
[@ wes seme]| 
| 本 ) 草 矶 的 月 户 ,图片 空间 格 于 2 月 22 日 开 好 逐步 升级 新 筷 本 ， 现 已 开始 公 到 < 下 
上 人 新 画 片 | 从 图 片 空间 选择 EEE es 
下 上 目录 PC 鳄 图 片 ， || 按 上 传 时 浊 从 煌 到 日 ” 

日 各 全 加 全 
田 国 
-| 攻 岂 
加 
由 国 店 入 关 修 

S05G75 上 tx | 
1 
nn 


画 9-43 ”选择 轮 播 banner 图 
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ES》 单 击 “ 添 加 ”按钮 ， 继 续 添加 其 他 轮 播 图 片 ， 然 后 将 每 一 张 轮 播 图 对 应 的 宝 
贝 链接 粘贴 至 “链接 地 址 ”的 文本 框 内 ， 如 图 9-44 所 示 。 


内 容 设置 。 显示 设置 @ 使 有 帮助 
图 片 地 址 链接 地 址 : 操作 : 
https://img.alicdn.com/imgedr 国 。 https:J/temtaobao cormjiem 上 + 
https://img.alicdn.conVimgextr 国 https://Rem.taobao.com/tem.r 全 ba 
https://img.alicdn.com/imgextr 图 heeps://tem.taobao.com/item.r 全 


取消 


图 9-44 ”添加 其 他 图 片 及 链接 地 址 


人 GZ 单 击 “显示 设置 " 选项 卡 标签 ,选择 “显示 标题 " 后方 的 “不 显示 ”选项 ,在 “ 切 
换 效 果 ” 下 列 菜 单列 表 选 择 “ 渐 变 滚动 ”选项 ， 如 图 9-45 所 示 


内 容 设 置 


显示 标题 加 不 显示 


模块 高 度 
切换 效果 ; 


图 9-45 ”设置 轮 播 切 换 效 果 


人 GE 单 击 图 9-45 中 的 “保存 ”按钮 后 ， 即 完成 轮 播 图 设置 ， 返 回 店铺 装修 页 面 
即 可 预览 图 片 轮 播 效果 ， 如 图 9-46 所 示 


本， ,本 oa 


新 品 上 市 


页 李 女装 新 让 十 各 完 检 宴 古 背 贡 六 三 谢 休 头 长 杖 


图 9-46 ”预览 常规 轮 播 效 果 
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9.2.4 ”其 他 模块 及 页 面 的 装修 


全 屏 轮 播 图 与 常规 轮 播 图 上 传 后 ， 还 有 分 类 导航 、 店 铺 优惠 券 及 
商品 自 定义 展示 区 需要 上 传 ， 这 三 部 分 的 上 传 方式 相同 ， 下 面 以 分 类 
导航 的 上 传 方法 为 例 进行 讲解 。 

ES》 将 “分 类 导航 jpg” 图 片上 传 到 图 片 空间 ， 将 鼠标 指针 
移动 至 该 图 片 ， 在 显示 的 按钮 中 单 击 “ 复 制 代码 ”按钮 ， 即 可 复制 该 
图 片 的 代码 ， 如 图 9-47 所 示 。 国人 全 证 
人 ES 使 用 Dreamweaver 软 件 ,为 不 同 的 分 类 创建 热点 ,并 添加 链接 ,如 图 9-48 所 示 。 
然后 将 整体 代码 复制 。 


Lt | 现 搬 上田 硬 . .MM. pr FA DO 本: 


分 类 导航 jpg 


图 9-48 创建 势 区 


EE》 单 击 自 定义 模块 右上 角 的 “编辑 ”按钮 。 进 入 “ 自 定义 内 容 区 ”对 话 框 ， 选 
择 “ 显 示 标题 ”后 方 的 “不 显示 ”选项 ， 单 击 “ 源 码 ”按钮 罗 ， 在 编辑 框 中 按 CtrltV 组 
合 键 粘贴 宝贝 促销 图 代码 ， 最 后 单 击 “ 确 定 ” 按 钮 ， 如 图 9-49 所 示 。 


显示 标题 : ”图 不 县 示 辐 旺 示 


四 恒 人 至- 公 - - 到 
可 > | 


<img src="https://img.alicdn.com/imgextra/i3/2096209889/O1CNO12MvD9aGd6bf0LTV_!!2096209889.jpg" alt=" 商 品 促销 ,jpg" usemap="#Map” 
lborder="0"/> 
<map name="Map"> 


<area shape="rect" coords="243,34,750,413" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.few6ay"> 
<area shape="rect" coords="51,227,141,317" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.few6ay"> 
<area shape="rect" coords="145,226,230,318" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.few6ay"> 
<area shape="rect" coords="54,322,143,411" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.fBw6ay"> 
<area shape="rect" coords="145,321,230,410" href="#https://shop116225127.taobao.com/?spm=a230r.7195193.1997079397.2.few6ay”> 
</map>| 


ee mw ¢ 
ls 内 容 正文 每 5 分 钟 自动 保存 一 次 。 自动 保存 于 : 2018-09-25 17:10:33 加 立即 保存 “恢复 编辑 历史 


图 9-49 ”粘贴 代码 
淘宝 店铺 页 面 中 主要 有 4 种 页 面 ,分别 为 基础 页 、 宝 贝 详情 页 、 宝 贝 列表 页 以 及 自 
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定义 页 ， 如 图 9-50 所 示 。 其 中 首页 和 店铺 搜索 页 属于 基础 页 ， 也 是 店铺 装修 的 重点 页 面 ， 
前 几 个 小 节 中 已 经 对 店铺 首页 和 宝贝 详情 页 的 装修 方法 进行 了 介绍 ， 其 他 未 介绍 页 面 的 装 
修 方式 与 首页 的 装修 方式 相同 ， 只 需要 根据 装修 需求 进行 模块 添加 以 及 调整 即 可 。 


页 西 合 宕 布局 管理 


+ 并 | | 目 和 | 


宝贝 详情 页 全 贝 列表 页 自 定 义 页 
默认 三 贝 洋 情 页 默认 斌 贝 分 类 页 限时 特惠 


图 9-50 淘宝 店铺 主要 页 面 分 布 


9.2.5 ”设置 页 尾 模块 


淘宝 店铺 页 尾 模块 是 PC 端 店铺 首页 装修 页 面 的 最 后 一 个 自 定义 内 容 区 ， 卖 家 可 以 根 
据 店铺 营销 需求 自行 设计 或 者 直接 使 用 第 三 方 提供 的 软件 ( 如 码 工 在 线 ) 制作 页 尾 内 容 ， 
放置 在 店铺 首页 页 尾 模块 ， 具 体操 作 步 骤 如 下 。 

人 ES 进入 淘宝 店铺 装修 后 台 首页 ， 按 住 鼠标 左 键 拖 动 滚动 条 至 页 面 最 下 方 ， 从 左 
侧 列表 中 拖 动 “ 自 定义 模块 ”至 右 侧 页 面 中 ， 如 图 9-51 所 示 。 


图 9-51 设置 页 尾 自 定义 区 域 


EE 单 击 “ 编 辑 ” 按 钮 ， 进 入 “ 自 定义 区 内 容 ” 对 话 框 ， 选 择 “ 显 示 标 题 ” 后 方 
的 “不 显示 ”选项 。 然 后 单 击 下 方 的 “插入 图 片 空间 图 片 ”按钮 ， 选 择 需要 上 传 的 页 尾 图 
片 ， 如 图 9-52 ~ 图 9-54 所 示 。 

人 GE 单 击 图 9-54 中 的 “确定 ”按钮 ， 完 成 页 尾 模块 的 装修 。 单 击 装修 页 面 右上 
角 的 “预览 ”按钮 ， 可 以 查看 店铺 页 尾 装修 效果 ， 如 图 9-55 所 示 。 

店铺 所 有 模块 装修 完 之 后 , 就 可 以 发 布 了 。 店 铺 发 布 前 , 运营 人 员 一 定 要 提前 预览 下 ， 
查看 店铺 首页 装修 各 部 分 是 否 存在 问题 ， 如 无 误 可 以 单 击 装修 页 面 右上 角 的 “发 布 站 点 ” 
按钮 ， 发 布 装修 后 的 新 店铺 。 这 里 需要 注意 的 是 ， 发 布 装修 页 面 之 前 记得 对 店铺 装修 模板 
备份 ,方便 以 后 店铺 装修 改版 。 
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所 生源 代码 内 正文 与 5 分 半自动 保存 一 次 。 加 立即 保本 羽 夏 弹 可 历 史 - 


图 9-52 ”插入 空间 图 片 


开 三 公 更， 应 去 二 用 ， 
内 容 正 文 贞 5 分 钟 自动 保存 一 次 = 局 立即 尾 存 人 恢复 编 扒 历 史 、 
PC 条 到 片 ”| 榨 上 传 9 可 从 强 到 早 ” [a ) 
加 
已 好 扰民 片 托 动 可 修改 渤 入 器 子 ) 
Ea 


图 9-53 图 片上 传 


收 到 结交 后 各 有 而 
内 联系 售后 于 务 - 
货 PM15 点 后 /星期 次 日 发 全 本 大 承担 


站 百 正 祥 本 5 分 鱼 自 动 保存 次。 。。 司 立 印 六 存 低 天 达 历 史 - 


图 9-54 ”插入 页 尾 图 片 
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回 实物 拍摄 6 发 货 /物流 园 售后 服务 回 回 
均 为 所 影 昌 实物 哲 拔 , 由 于 拍摄 光 |， 本店 叶 认 使 用 前 达 快 递 ,EMS/ 硕 由。 | 收 到 货物 后 如 有 质量 问题 ， 请 7 天 和 
线 问 是 ， 宝 风 图 片 与 实际 宝贝 产生 |， 请 补足 邮费 。PM16 点 前 付款 当天 发 “| 内 联系 售后 服务 . 产品 质量 问题 ， 
一 定 色差 . 色差 已 减 至 最 小 , 以 实 “| 货 PM16 点 后 /星期 日 次 日 发 货 ! 承担 来 回 运费 。 1 

物 为 准 口 逐 5 


2012 海宝 (中 国 ) 坎 件 有 限 公司 版 权 所 有 


图 9-55 ”店铺 页 尾 效果 


9.3 无线 端 店铺 装修 


移动 互联 网 的 快速 发 展 以 及 智能 手机 的 普及 ， 网 络 购物 越 来 越 趋向 于 移动 端 。 因 此 ， 
在 这 种 趋势 下 , 无 线 端 店铺 装修 也 就 显得 十 分 重要 。 无 线 端 店铺 装修 模块 较 多 , 一 般 来 说 ， 
无 线 端 店铺 装修 模块 主要 包括 店铺 首页 、 宝 贝 分 类 、 微 淘 、 全 局 设置 、 自 定义 页 等 几 方面 ， 
图 9-56 所 示 为 无 线 端 店铺 装修 各 模块 的 设置 位 置 


EE 
”条 , 升级 为 智能 版 可 使 用 多 个 首页 和 智能 闭 修 ,提升 装修 效果 立即 订购 
手 淘 首 页 

活动 

页 面 名 称 更 新 时 间 

新 品 

2 手机 淘宝 店铺 首页 线 上 首页 。。 3080322 105 

主见 分 类 


图 9-56 无线 端 店铺 装修 模块 
下 面 针 对 店铺 首页 、 宝 贝 分 类 、 微 淘 、 全 局 设置 与 自 定义 页 这 几 个 主要 模块 装修 进行 
讲解 。 
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1. 店铺 首页 

无 线 端 店铺 首页 装修 包括 手 淘 首 页 、 活 动 、 新 品 、 买 家 秀 ， 其 中 “新 品 ”页 面 会 在 店 
铺 发 布 新 品 后 自动 展示 ， 无 需 进行 设置 。 下 面 以 手 淘 首 页 为 例 讲 解 店铺 首页 装修 ， 具 体操 
FE 步骤 如 下 。 
EE3D 进入 旺 铺 装 修 后 台 , 选择 页 面 顶端 “手机 端 ” 选 项 卡 , 单 击 左 侧 导航 栏 中 “ 店 
铺 首页 ”一 “ 手 淘 首 页 "， 单 击 “手机 淘宝 店铺 首页 ”后 方 “装修 页 面 ”按钮 ， 进 入 手 淘 
首页 装修 页 面 ， 如 图 9-57 所 示 。 


吕 [| 
mm 
让 请 首页 床 , 升级 为 短 能 版 可 使 用 多 个 兽 页 和 和 能 半途， 提升 美 收效 果 立 如 订购 
一 
医 
Di 与 一 起 舌 作 首 十 新 建 页 面 
活动 
白 页 面 名 称 更 新 时 间 状态 
站 新 品 
飞天 于 机 海 宇 店铺 首页 颖 上 首页 20180323103255 Ee 更 SV 
全 由 类 
[ 
全 则 设置 
和 定义 页 


图 9-57 无线 端 适 营 中 心 
E> 选中 店铺 招牌 部 分 页 面 右 侧 自动 出 现 “ 店 招 模块 ” 弹 框 ， 如 图 9-58 所 示 。 


请 在 设计 时 注意 整体 效 


畏 议 400K 左 右 , 支持 类 型 jpg. png 
} 各 (gj :三 [®) 许 
全 部 宇 贝 。 店铺 油 淘 。 宝贝 分 类 。 联系 客服 
图 9-58 上传 店 招 


区 单 击 “ 店 铺 招牌 ”一 “上 传 店 招 ” 按 钮 ， 进 入 图 片 空间 ， 选 中 提前 准备 好 的 
无 线 端 店 招 上 传 至 店 招 模块 , 单 击 “确定 ”按钮 , 即 设置 完成 店 招 模块 ,如 图 9-59 和 图 9-60 
所 示 。 
ESB 单 击 店 招 模块 中 “搜索 栏 ”一 “设置 店铺 搜索 ”按钮 ， 进 入 “店铺 搜索 ”页 
面 ， 单 击 “ 热 门 关 键 词 ”选项 卡 ， 设 置 与 本 店 商品 相关 的 关键 词 ， 设 置 完成 后 单 击 右上 角 
“发 布 ”按钮 ， 完 成 搜索 框 设置 ， 如 图 9-61 所 示 。 
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大 魔 友 女装 店 


ae 


和 lz 


| 
图 9-59 ”上 传 店 招 
eee Tao 会 
《 ”大 魔 树 女装 店 @ 
粉丝 数 
QL 扩 芥 | 首页 ”会 贝 
图 9-60” 店 招 上 传 效果 
搜索 设置 x 
A (有) O 
bs 坊 入 扫 雪 关键 记 on 
ee 家 12:00 AN 100x mm 的 站] 括 才 司 * 
Q 于 成 虹 多 可 设 轩 6 个 手动 [本 关键 记 , 设 壮 成 功 2 天 后 在 客户 
热门 失 共 Le 2 | 
热 | 网 
连 衣 反 二 H 攻 四 一 
各 一 和 
HE 4 面 
各 
十 承 00315 
Lm ] 莉 因 


图 9-61 设置 店铺 搜索 关键 词 

GE 店 招 模块 设置 完成 后 ， 下 面 对 店 招 下 方 的 部 分 进行 设置 。 中 间 部 分 用 于 展示 
店铺 产品 ， 可 以 直接 根据 PC 端 首页 布局 ， 将 手 淘 首 页 装修 页 面 左 侧 导航 栏 中 “ 轮 播 图 模 
块 ”“ 自 定义 模块 ”“ 营 销 互动 类 ”装修 模块 拖 至 店 招 下 方 ， 如 图 9-62 所 示 。 
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宝 旺 请 本 ,了 
» sn 
Er 
m 
3 
on on 
-un 
Ce ed 
本 
on 
图 a 


Le 
加 下 
新 老 喜 而 六 
on 
十 


办 插 轿 适 机 


人 MO 
BE 
2 这 
aa 
TT 一 
as ea 
后 全 
可 且 情 过 动 加 模块 
图 9-62 ”模块 拖 昌 


人 ESB》 选中 轮 播 图 模块 ， 右 侧 会 弹出 “ 轮 播 图 模块 ”设置 框 。 单 击 国 按钮 ， 选 择 并 
上 传 设计 好 的 轮 播 图 ， 然 后 将 轮 播 图 片 对 应 的 宝贝 链接 或 页 面 链接 〈 无 线 端 链接 ) 粘贴 至 
无 线 端 链接 框 ， 如 图 9-63 所 示 。 单 击 “保存 ”按钮 ， 即 设置 完成 轮 播 图 模块 。 

人 GE 轮 播 图 下 方 即 宝贝 分 类 模块 ， 上 传 之 前 需要 将 “无 线 端 分 类 导航 jpg” 进 行 
切 图 。 选 中 自 定义 模块 ， 单 击 “ 编 辑 版 式 ” 超 链接 ， 如 图 9-64 所 示 。 在 自 定 义 编辑 器 中 
[ 具 款 选 出 图 片 大 小 的 区 域 ， 将 切 好 的 分 类 模块 图 片 陆续 上 传 ， 并 放置 相对 应 的 
链接 ， 单 击 “ 保 存 ” 按 钮 完成 上 传 ， 如 图 9-65 所 示 。 

无 线 端 页 面 基本 与 PC 端 对 应 ， 所 以 还 有 三 个 模块 需要 上 传 ， 分 别 为 轮 播 图 、 优 惠 券 
与 商品 自 定义 展示 区 ， 优 惠 券 与 商品 自 定义 展示 区 上 传 方式 相同 ， 这 里 不 再 费 述 。 将 所 有 
模块 上 传 完 成 后 ， 单 击 页 面 右上 角 的 “发 布 ”按钮 ， 即 完成 无 线 端 首页 装修 ， 如 图 9-66 


使 用 框 选 ] 


所 示 。 


294 


第 9 章 | 店铺 装修 及 上 传 方法 


© 
[对 | 十 二 bn2/4 


回 让 二 模块 下 方 的 同 辽 


[oe] 


R& 


图 9-63 上传 轮 播 图 片 及 链接 


入 
当前 闻 建 了 0 个 图 片区 域 
加 用 六 这 模块 下 方 的 白色 同 阶 


轮 
EL 


图 9-64 ”分 类 导航 上 传 


-Qt 
50% 


友 半 专区 个 耻 , at 
本 


上 传 到 片 


其 
人 
四 乔 上 传 宽度 320px , 高 度 160p: 的 图 片 ， 


十 ho 上 


佑 这 
请 输入 或 选择 合法 的 链接 3? 


取消 完成 


图 9-65 上传 分 类 导航 
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图 9-66 ”无线 端 店铺 首页 蕉 修 效果 
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2. 宝贝 分 类 

宝贝 分 类 即 展示 在 无 线 端 首页 底部 的 宝贝 分 类 导航 ， 无 线 端 宝贝 分 类 与 PC 端 宝贝 分 
类 设置 位 置 和 方法 相同 ， 若 需要 修改 ， 直 接 进 入 宝贝 分 类 装修 页 面 重新 进行 设置 ， 这 里 不 
再 更 述 。 


3. 微 淘 


微 淘 是 宣传 店铺 的 品牌 文化 、 发 布 促销 活动 、 管 理 新 老 客户 、 定 向 推送 优秀 内 容 的 平 
台 , 在 微 淘 上 发 布 的 内 容 可 以 被 粉丝 即时 收 到 。 该 部 分 内 容 主要 属于 后 期 营销 运营 的 内 容 ， 
这 里 不 再 熬 述 。 


4. 全 局 设置 与 自 定义 页 


全 局 设置 主要 设置 “ 店 招 && 标 志 设 置 "“ 店 铺 印象 “店铺 搜索 "， 该 部 分 内 容 与 手 淘 
首页 的 设置 内 容 相同 ， 所 以 不 再 进行 介绍 。 自 定义 页 主要 是 一 些 二 级 页 面 的 添加 ， 可 根据 
需求 自行 进行 设置 。 


94 本 章 小 结 


本 章 主要 介绍 了 淘宝 店铺 装修 的 相关 知识 ， 其 中 包括 认识 店铺 装修 工具 、PC 端 店铺 
装修 以 及 无 线 端 店铺 装修 。 

通过 本 章 内 容 的 学 习 , 读 者 应 当 了 解 旺 铺 的 功能 ,熟悉 PC 端 与 无 线 端 装修 的 基本 设置 ， 
掌握 PC 端 与 无 线 端 店铺 装修 的 流程 及 操作 方式 ， 学 会 对 店铺 PC 端 和 无 线 端 进行 装修 。 
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